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

Stellen Sie sich vor, ich habe eine lange Textzeile mit mehreren Wörtern in einem DIV:

Hallo, lieber Kunde. Bitte schauen Sie sich unser Angebot an.

Das DIV hat eine dynamische Breite. Ich möchte den obigen Text umbrechen. Derzeit erfolgt der Umbruch an einer Wortgrenze, wodurch die Länge der ersten Zeile maximiert wird:

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

Ich würde es vorziehen, dass das Umbrechen an der Satzgrenze geschieht. Wenn jedoch kein Umbruch erforderlich ist, möchte ich, dass die Linie als eine bleibt.

Um meinen Standpunkt zu veranschaulichen, schauen Sie sich bitte die verschiedenen DIV-Breiten an und wie ich meinen Text umbrechen möchte:

|-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.

Bei Wörtern können Sie einen weichen Bindestrich verwenden, sodass der Wortumbruch an den vorgeschlagenen Silbengrenzen erfolgt. Wenn keine Verpackung erforderlich ist, die ­ bleibt unsichtbar. Wenn Verpackung erforderlich ist, die ­ da passiert es:

magnifi­cently

Gibt es eine analoge Methode zum Hinweisen auf Zeilenumbruch in HTML?

Verwenden ­ in Worten bzw <wbr> zwischen Wörtern, als <wbr> wird keinen Bindestrich einführen.

Siehe auch:

• Quirksmodus: <wbr> Kompatibilitätsliste

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

Kurz gesagt, Sie sollten festlegen white-space: nowrap; für Ihren Textcontainer und Ihre Verwendung <wbr> um wie gewünscht Pausen zwischen Wörtern einzufügen.

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

In diesem Fall möchte ich die Kontrolle über Zeilenumbruchhinweise bei einer Vielzahl unterschiedlicher Bildschirmauflösungen haben. Dazu verwende ich <br> Tags und CSS. Es kann ein Durcheinander werden, wenn es komplex wird, aber ich habe festgestellt, 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 verwende dann CSS mit Medienabfragen, um anzugeben, wann die verschiedenen Pausen ausgelöst werden sollen.

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

Verwenden Sie ein geschütztes Leerzeichen U+00A0 (bzw   wenn Sie keine bequeme Möglichkeit haben, das Zeichen als solches einzugeben) zwischen Wörtern, wenn ein Zeilenumbruch nicht erlaubt sein soll, und sonst ein normales Leerzeichen.

Dies funktioniert nicht, wenn Wörter Bindestriche „-“ enthalten, und einige andere Zeichen, wie z. B. Klammern, können ebenfalls Probleme verursachen, da einige Browser sie so behandeln, als ob sie einen Zeilenumbruch nach ihnen zulassen. Sehen http://www.cs.tut.fi/~jkorpela/html/nobr.html für eine lange Abhandlung, einschließlich verschiedener Techniken zur Bewältigung der Probleme. Aber wenn Sie normale Wörter nur mit normaler Interpunktion und ohne Bindestriche haben, sollten Sie mit dem einfachen Ansatz zufrieden sein.

Ich hatte gerade das gleiche Problem. Ich hatte Text wie den folgenden:

<div>Assistant Something / Anything Pabulum Nautical</div>

Wo bricht es nach dem / Charakter würde wirklich Lesbarkeit helfen.

In meinem Fall habe ich es gelöst, indem ich die gewünschten Blöcke mit “niedrigerer Zeilenumbruchpriorität” mit Inline-Block (jetzt inline flow-root anscheinend) Elemente:

<div><span class="inline">Assistant Something</span> / <span class="inline">Anything Pabulum Nautical</span></div>

Siehe Snippet für Ergebnisse.

.d {
  margin: 1em;
}

#b span {
  display: inline-block;
}

<div class="d" id="a">Assistant Something / Anything Pabulum Nautical</div>

<div class="d" id="b"><span>Assistant Something</span> / <span>Anything Pabulum Nautical</span></div>