Bagaimana untuk memastikan liputan teks tatal penuh apabila menggunakan sifat CSS 'Limpahan: tatal' pada div
P粉321584263
P粉321584263 2023-08-16 00:13:42
0
2
424

Saya baru dalam pengaturcaraan dan sedang cuba membuat tapak web satu halaman yang mudah menggunakan HTML/CSS dan JS. Saya mempunyai kelas CSS yang dipanggil 'general_container' di mana saya menulis teks, yang juga ditakrifkan dalam CSS sebagai 'div_text' (kod untuk kedua-duanya disediakan di bawah):

.general_container{ jidar: min(1vw,1vh) min(1vw,1vh); paparan: flex; ketinggian: muat-kandungan; lebar: muat-kandungan; lebar maksimum: 100%; ketinggian maksimum: 80vj; kedudukan: relatif; padding: min(1vw,1vh); warna sempadan: #232323; gaya sempadan: pepejal; lebar sempadan: 0.2rem; jejari sempadan: 1rem; align-item: tengah; justify-content:center; limpahan-x: tersembunyi; limpahan-y: auto; } .div_text { saiz fon: calc(12px + 1.5vw); warna: #F2F2F2; kedudukan: relatif; }

Masalah timbul apabila teks adalah besar berbanding dengan div di dalamnya: menggunakan saiz fon yang ditakrifkan di atas, pada resolusi asli saya (2560x1440) teks tersembunyi dan boleh diakses melalui bar skrol. Walau bagaimanapun, bahagian atas bar skrol tidak menunjukkan permulaan teks seperti yang ditunjukkan dalam imej di bawah (saya menggunakan teks pemegang tempat generik).

Saya rasa saiz fon dinamik dan kekangan pada saiz div adalah punca kelakuan ini, tetapi saya tidak tahu bagaimana untuk membetulkannya.

Imej dengan teks tidak boleh diakses melalui bar skrol

Saya cuba mengubah suai kekangan div dan sifat limpahan, tetapi daripada apa yang saya baca pada panduan webdev Mozilla rasmi, menggunakan limpahan-y: tatal (auto lalai untuk tatal dalam kes ini) melakukan apa yang saya mahu ia lakukan. Jika anda menambah lebih banyak teks, meningkatkan ketinggian maks akan menyebabkan masalah yang sama.

P粉321584263
P粉321584263

membalas semua (2)
P粉347804896

Alih keluar peraturanalign-item:center;.

    P粉226642568

    Untuk memastikan bar skrol bermula di bahagian atas dan meliputi keseluruhan kandungan teks, buat perubahan berikut: Daripada.general_container中删除justify-content: center;. Daripada.general_container中删除height: fit-content;width: fit-content;. Untuk mengehadkan ketinggiannya..general_container设置一个特定的max-height

    Contoh

    .general_container { /* ...其他属性... */ /* 删除 justify-content: center; */ /* 删除 height 和 width fit-content */ max-height: 600px; /* 根据需要进行调整 */ /* ...其他属性... */ overflow-x: hidden; overflow-y: auto; }
      Muat turun terkini
      Lagi>
      kesan web
      Kod sumber laman web
      Bahan laman web
      Templat hujung hadapan
      Tentang kita Penafian Sitemap
      Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!