Tunjukkan tanda sempang hanya apabila perlu? (sempang lembut tidak akan memotongnya)-Soal Jawab Rangkaian PHP Cina

Adakah mungkin untuk menggunakan sempang atau sempang lembut dalam CSS supaya sempang tidak diberikan tanpa perlu?

Matlamat saya adalah untuk mengekalkan teks asal sebanyak mungkin dan mengeluarkan sebarang perkataan melainkan benar-benar kritikal kerana ia terlalu panjang untuk dimuatkan dalam lebar bekas.

Kes khusus saya

Saya mahu memaparkan teks "Hai Superman" seperti ini:

Jika perkataan "Superman" terlalu panjang untuk dimuatkan ke dalam bekas, saya mahu tanda sempang entah bagaimana, seperti:

Hi Super- lelaki

Walau bagaimanapun, jika perkataan "Superman" boleh dimuatkan ke dalam bekas, ia mesti diterjemahkan tanpa tanda sempang

Hai Superman

Jika situasi di atas mungkin ("Superman" boleh digunakan tanpa tanda sempang), maka menambah tanda sempang yang tidak perlu

Hi Super- lelaki

Saya boleh menukar HTML jika perlu. Saya boleh memasukkan sempang dengan cara yang bermakna (asalkan terdapat lebih daripada 3 huruf antara setiap sempang. "Superma-n" tidak pernah bagus)

Apa yang saya cuba

Saya rasa tanda sempang lembut adalah penyelesaiannya. Jadi saya menggunakan:Hai Superman

Tetapi saya dapati bahawa ini membawa kepada situasi "sempang tidak perlu" yang tidak boleh diterima yang ditunjukkan di atas.

Tunjukkan coretan yang gagal:

body { jidar-kiri: 30px; } div { sempadan: pepejal 1px hitam; } .lebar { sempadan: pepejal 1px biru; lebar: 500px; } .sempit { sempadan: pepejal 1px merah; lebar: 360px; } h2 { font-family: 'Courier New'; berat fon: 400; saiz fon: 87px; } kod { warna latar belakang: #eee; }

 Super&malu;man perkataan penuh "Superman" tidak sesuai
  
Hi Super&malu;man
 Tetapi dalam kes ini, perkataan "Superman" akan sesuai dengan tidak digembar-gemburkan pada baris kedua Tetapi CSS yang terkutuk itu memutuskan untuk menambah tanda sempang juga tidak boleh diterima! Sekali lagi, ini menggunakan kod yang sama seperti contoh sebelumnya lelaki super&malu
 Hai Super&malu;lelaki
 Saya juga cuba menambah teg pemecah kata sebelum "Superman", seperti ini Hai manusia super&malu ; 
 
 Hai Lelaki yang sangat&pemalu

Bolehkah saya menyelesaikan contoh di atas menggunakan CSS sahaja? (Mencuba atribut word-break berbeza tanpa kejayaan)

Tekaan saya kerana sifat CSS, adalah mustahil untuk menyelesaikan masalah ini hanya menggunakan HTML dan CSS biasa. Saya mengandaikan CSS hanya menghuraikan teks baris demi baris, ia tidak dapat mengetahui sama ada perkataan "sesuai dengan lebih baik" dalam baris teks seterusnya. Jika tanda sempang ditemui, ia akan cuba memuatkan bilangan maksimum aksara dalam baris teks semasa.

Saya ingin menyelesaikan masalah ini hanya menggunakan HTML dan CSS, atau tidak sama sekali.

Terbaik:

Tidak menggunakan JavaScript untuk penghuraian teks.
Saya tidak mahu perlu menetapkan sifat CSS yang berbeza untuk setiap div berdasarkan lebar div dan sama ada saya fikir teks itu memerlukan tanda sempang.
Tidak mahu menambah pembalut pada teks saya
Tiada tanda sempang automatik menyebabkan tanda sempang yang tidak masuk akal seperti "Superma-n" (tetapi dalam keadaan semput, saya boleh menggunakan tanda sempang automatik asalkan terdapat 3 aksara antara setiap sempang . Contohnya "Sup -erman")

p { width: 55px; border: 1px solid black; } p.none { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } p.manual { -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; } p.auto { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

auto: hyphen where the algorithm is deciding (if needed)
An extremelyasdasd long English word
manual: hyphen only at &hyphen; or  (if needed)
An extremelyasd long English word
none: no hyphen; overflow if needed
An extremelyasd long English word

body { margin-left: 30px; } div { border: solid 1px black; } .wide { border: solid 1px blue; width: 500px; } .narrow { border: solid 1px red; width: 360px; } h2 { font-family: 'Courier New'; font-weight: 400; font-size: 87px; } code { background-color: #eee; } .unbreakable {display:inline-block}

Superman looks good in really narrow containers where the full word "Superman" would not fit

Hi Superman

And in this case the word "Superman" would fit unhypenhated on the second row.
This uses the same code as the previous example

Hi Superman

membalas semua (2)

P粉7014918972023-08-26 10:07:02 Tingkat 2

CSS 3 termasuk atribut "hyphens”属性，可根据指定的lang" untuk menetapkan tanda sempang Tetapi ini hanyalahdraf berfungsi, jadi sokongan masih Anda boleh menetapkannya kepada

Tiada, jadi tiada tanda sempang akan dipaparkan

secara manual, jadi ia hanya akan memecahkan perkataan di mana watak istimewa
auto, yang secara automatik menambah tanda sempang jika diperlukan berdasarkan penyetempatan.

bug

.Ini adalah contoh, jika anda menjalankan windows/linux pastikan anda menyemak perbezaan antara Firefox dan chrome.

 auto: hyphen where the algorithm is deciding (if needed) An extremelyasdasd long English word
 
 manual: hyphen only at &hyphen; or &shy; (if needed) An extremelyasd long English word
 
 none: no hyphen; overflow if needed An extremelyasd long English word

Penyelesaian biasa untuk kekurangan sokongan "auto" webkit ialah menggunakan sempang:auto dengan webkit jadi teks akan ditanda sempang pada penyemak imbas yang menyokongnya dan dinyahsempang dibalut pada webkit.

Suka+0

Tambah Balasan