Text-Overflow ellipses mit Wort Umbruch

MichaelAl · 31. Okt. 2014

Ich bräuchte ein Mittelding aus Text-Overflow: ellipses und Wort-Umbruch. Um es zu verdeutlichen habe ich ein Code Beispiel erstellt: Edit fiddle - JSFiddle

Der Text "KurzWort EinSehrLangesWort" soll jedes Wort umbrechen. Wenn ein Wort nicht reinpasst, wird es mit "..." gekürzt. In meinem Beispiel würde es dann so aussehen:

KurzWort
EinSehrLanges...

Ist so etwas überhaupt möglich? Microsoft hat bei Windows 8 Tiles ein ähnliches System. Am liebsten wäre es mir, wenn man das mit CSS lösen könnte, ansonsten bastel ich mir halt eine javascript Lösung.

kkapsner · 04. Nov. 2014

OK - und was ist jetzt das Problem? Mit text-overflow: ellipsis funktioniert das doch...?

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
div {
	width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid black;
}
</style>
</head>
<body>
<div> Das ist ein Text mit einem seeeeeeeeeeeeeeeeeeeeeeeeeeeehr langen Wort: Donaudampfschifffahrskapitänsmütze. </div>
</body>
</html>

Text-Overflow ellipses mit Wort Umbruch

MichaelAl

New member

kkapsner

Super Moderator