Bindestriche nur bei Bedarf anzeigen? (Der weiche Bindestrich schneidet es nicht ab)

Question

Ist es möglich, in CSS Bindestriche oder weiche Bindestriche zu verwenden, damit Bindestriche nicht unnötig gerendert werden?

Mein Ziel ist es, den Originaltext so weit wie möglich beizubehalten und alle Wörter herauszubrechen, es sei denn, sie sind absolut kritisch, weil sie zu lang sind, um in die Containerbreite zu passen.

Mein konkreter Fall

Ich möchte den Text „Hi Superman“ so darstellen:

Wenn das Wort „Superman“ zu lang ist, um in den Container zu passen, möchte ich es irgendwie trennen, etwa:

Hallo Super-
Mann

Wenn das Wort „Superman“ jedoch in den Container passt, muss es ohne Bindestriche wiedergegeben werden

Hallo
Superman

Wenn die obige Situation möglich ist („Superman“ kann ohne Bindestrich verwendet werden), ist das Hinzufügen von unnötigen Bindestrichen nicht akzeptabel:

Hallo Super-
Mann

Ich kann den HTML-Code bei Bedarf ändern. Ich kann Bindestriche sinnvoll einfügen (solange zwischen jedem Bindestrich mehr als 3 Buchstaben stehen. „Superma-n“ ist nie gut)

Was ich versucht habe

Ich denke, weiche Bindestriche sind die Lösung. Also habe ich Folgendes verwendet:Hi Super­man

Aber ich finde, dass dies zu der oben gezeigten inakzeptablen Situation von „unnötigen Bindestrichen“ führt.

Fehlgeschlagenes Snippet anzeigen:

<code>body {
  Rand links: 30px;
}
div {
   Rand: durchgehend 1 Pixel schwarz;
}
.breit {
  Rand: durchgehend 1 Pixel blau;
      Breite: 500px;
}
.eng {
  Rand: durchgehend 1 Pixel rot;
  Breite: 360px;
}
 h2 {
   Schriftfamilie: „Courier New“;
    Schriftstärke: 400;
    Schriftgröße: 87px;
  }
Code {
 Hintergrundfarbe: #eee;
}</code>

<code><p> <code>Super&amp;shy;man</code> sieht in wirklich engen Containern gut aus das vollständige Wort „Superman“ würde nicht passen</p>
<p>
<div class="narrow"><h2>Hallo Super&shy;man</h2></div>

<p>Aber in diesem Fall würde das Wort „Superman“ ohne Bindestrich in die zweite Zeile passen. Aber das verdammte CSS entscheidet sich trotzdem für das Hinzufügen von Bindestrichen.
Auch hier wird derselbe Code wie im vorherigen Beispiel verwendet
<code>Super&amp;shy;man</code></p>
<div class="wide"><h2>Hallo Super&shy;man</h2></div>

<p>Ich habe sogar versucht, vor „Superman“ ein Wortumbruch-Tag einzufügen, wie dieses <code>Hallo <wbr> aber es hilft nicht</p> ;
<p> </p>
<div class="wide"><h2>Hallo <wbr>Super&shy;man</h2></div></code>

Kann ich das obige Beispiel nur mit CSS lösen? (Verschiedene word-break-Attribute ohne Erfolg ausprobiert)

Ich vermute, dass es aufgrund der Natur von CSS unmöglich ist, dieses Problem einfach mit einfachem HTML und CSS zu lösen. Ich gehe davon aus, dass CSS den Text nur Zeile für Zeile analysiert und nie wissen kann, ob ein Wort in die nächste Textzeile „besser passt“. Wenn ein Bindestrich gefunden wird, wird versucht, die maximale Anzahl von Zeichen in die aktuelle Textzeile einzufügen.

Ich würde dieses Problem gerne nur mit HTML und CSS oder gar nicht lösen.

Am besten:

• Verwendet kein JavaScript für die Textanalyse.

• Ich möchte nicht für jedes Div unterschiedliche CSS-Eigenschaften festlegen müssen, basierend auf der Breite des Div und der Frage, ob der Text meiner Meinung nach einen Bindestrich benötigt.

• Ich möchte meinen Text nicht umbrechen

• Wenn keine automatische Silbentrennung vorhanden ist, entstehen lächerliche Bindestriche wie „Superma-n“ (aber zur Not kann ich die automatische Silbentrennung verwenden, solange zwischen den einzelnen Bindestrichen 3 Zeichen stehen. Zum Beispiel „Sup -deutsch")

Answer 1

CSS 3 包含一个“hyphens”属性，可根据指定的 lang 属性设置连字符。但这只是一个工作草案，所以支持有点< a href="https://caniuse.com/#search=hyphens" rel="nofollow noreferrer">还没有。

您可以将其设置为

• 无，因此不会显示连字符
• 手动，因此它只会在声明特殊字符 ­ 的地方断词，或者
• auto，它会根据本地化情况自动在需要的地方添加连字符。

在 Firefox、Edge 甚至 IE 中都可以正常工作，但主要问题是 webkit 不支持“auto”值。除了在 Mac 和 Android 上，这是他们唯一接受的值。是的，这是一种奇怪的bug。

这是一个示例，如果您运行的是 windows / linux，请务必检查 Firefox 和 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>

针对 webkit 缺乏“自动”支持的常见解决方法是将 hyphens:auto 与 webkit 的 work-break:break-all 一起使用，因此文本将在支持它的浏览器上用连字符连接并且在 webkit 上不使用连字符换行。

Answer 2

在长单词周围使用带有 display: inline-block 的容器。

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>