Ist es in HTML möglich, einen Wortumbruchhinweis einzufügen?

Question

Stellen Ich habe eine lange, aus mehreren Wörtern bestehende Textzeile in einem DIV:

Hallo, lieber Kunde. Bitte werfen Sie einen Blick auf unser Angebot.

Das DIV hat eine dynamische Breite. Ich möchte den obigen Text umschreiben. Derzeit geschieht die Umhüllung an einer Wortgrenze, die die Länge der ersten Zeile maximiert:

|-DIV WIDTH------------------------------------| 
Hello there, dear customer. Please have a look 
at our offer. 

ich lieber, dass die Verpackung an der Satzgrenze passieren. Wenn jedoch kein Umbruch erforderlich ist, möchte ich, dass die Linie als eine bleibt.

mein Punkt zu verdeutlichen, schauen Sie bitte auf die verschiedenen DIV Breiten und wie würde ich meinen Text wickeln mag:

|-DIV WIDTH--------------------------------------------------------| 
Hello there, dear customer. Please have a look at our offer. 
|-DIV WIDTH-----------------------------------| 
Hello there, dear customer. 
Please have a look at our offer. 
|-DIV WIDTH--------| 
Hello there, dear 
customer. 
Please have a look 
at our offer. 

Mit Worten kann man einen weichen Bindestrich verwenden, so dass der Zeilenumbruch vorschlug auf geschieht Silbengrenzen. Wenn kein Umbruch erforderlich ist, bleibt die ­ unsichtbar. Wenn Verpackung benötigt wird, ist die ­ wo es passiert:

magnifi­cently 

Gibt es ein analoges Verfahren für Hinting Zeilenumbruch in HTML?

Answer 1

Verwenden Sie ­ in Wörtern oder <wbr> zwischen Wörtern, da <wbr> keinen Bindestrich einführen wird.

Siehe auch:

• quirksmode: <wbr> compat list

Answer 2

Nicht ganz genau, aber nahe: http://jsfiddle.net/uW4h8/1/.

Kurz gesagt, sollten Sie white-space: nowrap;10 für Sie Textbehälter festlegen und <wbr> verwenden, um Brüche zwischen Wörtern wie gewünscht einzufügen.

Answer 3

Verwenden Sie eine unterbrechungsfreie Raum U + 00A0 (oder   wenn Sie keine bequeme Möglichkeit, den Charakter als solche von der Eingabe) zwischen den Wörtern, wenn eine Linie Pause ist nicht erlaubt, und normaler Raum sonst.

Dies funktioniert nicht, wenn Wörter Bindestriche "-" enthalten, und einige andere Zeichen, wie Klammern, können ebenfalls Probleme verursachen, da manche Browser sie so behandeln, dass sie einen Zeilenumbruch nach ihnen zulassen. Eine lange Abhandlung, einschließlich verschiedener Techniken zur Bewältigung der Probleme, siehe http://www.cs.tut.fi/~jkorpela/html/nobr.html. Aber wenn Sie nur normale Wörter mit normaler Interpunktion und keine Bindestriche haben, sollten Sie mit dem einfachen Ansatz zufrieden sein.

Answer 4

Die Elemente <wbr> und   funktionieren oft, aber nicht immer. Sie sind besonders problematisch beim Entwerfen einer statischen Zielseite, die (a) auf einer Vielzahl von Bildschirmen und Browsern funktionieren muss und (b) gut aussehen muss.

In diesem Fall möchte ich Kontrolle über Zeilenumbruch Hinweise auf eine Vielzahl von verschiedenen Bildschirmauflösungen. Um dies zu tun, verwende ich <br> Tags und CSS. Es kann zu einem Durcheinander kommen, wenn es komplex wird, aber ich fand, dass es bis zu einem gewissen Punkt funktioniert.Zum Beispiel:

<p class='break-hints'> 
Hello there, dear customer. <br class='break-big'> 
Please have a look <br class='break-small'> at our offer. 
</p> 

Ich benutze dann CSS mit Medienabfragen, um anzuzeigen, wann die verschiedenen Brüche ausgelöst werden sollten.

p.break-hints br { 
    display: none; 
} 

@media only screen and (max-width: 300px) { 
    p.break-hints br.break-small { 
    display: inline; 
    } 
} 

p.break-hints br.break-big { 
    display: inline; 
}