Tunjukkan tanda sempang hanya apabila perlu? (sempang lembut tidak akan memotongnya)

Question

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</pra>
<p>Walau bagaimanapun, jika perkataan "Superman" boleh dimuatkan ke dalam bekas, ia mesti diterjemahkan tanpa tanda sempang</p>
<pre class="brush:php;toolbar:false;">Hai
Superman

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

Hi Super-
lelaki</pra>
<p>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)</p>
<h3>Apa yang saya cuba</h3>
<p>Saya rasa tanda sempang lembut adalah penyelesaiannya. Jadi saya menggunakan:<code>Hai Super­man</code></p>
<p>Tetapi saya dapati bahawa ini membawa kepada situasi "sempang tidak perlu" yang tidak boleh diterima yang ditunjukkan di atas. </p>
<h3>Tunjukkan coretan yang gagal: </h3>
<p>

<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code>

<code><p> <code>Super&amp;malu;man</code> perkataan penuh "Superman" tidak sesuai</p>
<p>
<div class="narrow"><h2>Hi Super&malu;man</h2></div>

<p>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
<kod>lelaki super&amp;malu</kod></p>
<div class="wide"><h2>Hai Super&malu;lelaki</h2></div>

<p>Saya juga cuba menambah teg pemecah kata sebelum "Superman", seperti ini <code>Hai <wbr>manusia super&amp;malu</code> ;
<p> </p>
<div class="wide"><h2>Hai <wbr>Lelaki yang sangat&pemalu</h2></div></code>

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")

Answer 1

CSS 3 termasuk atribut "hyphens”属性，可根据指定的 lang" untuk menetapkan tanda sempang Tetapi ini hanyalah draf berfungsi, jadi sokongan masih < a href="https://caniuse.com/#search=hyphens" rel="nofollow noreferrer"> Anda boleh menetapkannya kepada

Tiada, jadi tiada tanda sempang akan dipaparkan

• secara manual, jadi ia hanya akan memecahkan perkataan di mana watak istimewa
diisytiharkan, atau
• ­auto, yang secara automatik menambah tanda sempang jika diperlukan berdasarkan penyetempatan.
Berfungsi dengan baik dalam Firefox, Edge dan juga IE, tetapi masalah utama ialah webkit tidak menyokong nilai "auto". Kecuali pada Mac dan Android, ini adalah satu-satunya nilai yang mereka terima. Ya, ini pelik

bug

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

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;
}

<ul>
    <li><code>auto</code>: hyphen where the algorithm is deciding (if needed)
    <p lang="en" class="auto">An extremelyasdasd long English word</p>
  </li> 
  <li><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
    <p lang="en" class="manual">An extreme&shy;lyasd long English word</p>
  </li>
  <li><code>none</code>: no hyphen; overflow if needed
    <p lang="en" class="none">An extreme&shy;lyasd long English word</p>
  </li>
</ul>

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.

Answer 2

Gunakan bekas dengan display: inline-block di sekeliling perkataan panjang.

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}

<p> <code>Super&amp;shy;man</code> looks good in really narrow containers where the full word "Superman" would not fit</p>
<p>
<div class="narrow"><h2>Hi <span class="unbreakable">Super&shy;man</span></h2></div>

<p>And in this case the word "Superman" would fit unhypenhated on the second row.<br/>
This uses the same code as the previous example</p>
<div class="wide"><h2>Hi <span class="unbreakable">Super&shy;man</span></h2></div>