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.
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)
Ich denke, weiche Bindestriche sind die Lösung. Also habe ich Folgendes verwendet:Hi Superman
Aber ich finde, dass dies zu der oben gezeigten inakzeptablen Situation von „unnötigen Bindestrichen“ führt.
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; } Super­man sieht in wirklich engen Containern gut aus das vollständige Wort „Superman“ würde nicht passen
Hallo Superman
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 Super­man
Hallo Superman
Ich habe sogar versucht, vor „Superman“ ein Wortumbruch-Tag einzufügen, wie dieses Hallo aber es hilft nicht
;
Hallo Superman
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")
CSS 3 包含一个“
hyphens”属性，可根据指定的lang属性设置连字符。但这只是一个工作草案，所以支持有点还没有。您可以将其设置为
的地方断词，或者在 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; }auto: hyphen where the algorithm is deciding (if needed)An extremelyasdasd long English word
manual: hyphen only at ‐ or ­ (if needed)An extremelyasd long English word
none: no hyphen; overflow if neededAn extremelyasd long English word
针对 webkit 缺乏“自动”支持的常见解决方法是将 hyphens:auto 与 webkit 的
work-break:break-all一起使用，因此文本将在支持它的浏览器上用连字符连接并且在 webkit 上不使用连字符换行。在长单词周围使用带有
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}