Zeilenumbrüche im Wort

[sonic]

Hi!

Ich bin auf der Suche nach einer Möglichkeit, mit CSS oder Javascript einen Zeilenumbruch nach einer geiwssen Anzahl von Buchstaben (die Schriftart ist Monospace, d.h. die Zeihenbreite ist immer gleich) in einem pre bzw. in einer Textarea zu erzwingen.

D.h. folgender Text:

  
<div class = "myclassname" id = "myIdentifier">  
  bla!  
<div>  

Sollte bei einer Breite des Containers von 20 Zeichen folgendermaßen dargestellt werden:

  
<div class = "myclas  
sname" id = "myIdent  
ifier">  
  bla!  
<div>  

Ich hatte zuerst white-space:pre-wrap probiert, aber der bricht mir das folgendermaßen um:

  
<div class =  
"myclassname" id =  
"myIdentifier">  
  bla!  
<div>  

Was ich brauche, wäre aber eine Lösung, die immer innerhalb des Worts umbricht und nicht versucht, Silbentrennung oder Wortgrenzen zu berücksichtigen.

hat da evtl. jemand eine Idee?

[Encoder]

Per CSS sicher nicht. CSS ist zur Formatierung gedacht, aber nicht zur Zerstückelung :-) Bei einer Spezialanwendung wie dieser müsstest du wahrscheinlich zu JavaScript greifen.
Oder du machst das gleich in einem serverseitigen Script.

[Gunnar Bittersmann]

@@Encoder:

nuqneH

Per CSS sicher nicht.

?? Aber sicher per CSS!

CSS ist zur Formatierung gedacht, aber nicht zur Zerstückelung :-)

Die Worttrennung an einer beliebigen Stelle (Zerstückelung) IST Formatierung. Man denke an künstlerische Textdarstellungen (Plakate), wo dies bewusst eingesetzt wird.

Es wäre also sehr wohl Sache von CSS. Wird es auch sein: 'word-break: break-all;' oder 'word-break: break-strict;' bzw. 'text-wrap: unrestricted;' [CSS3-TEXT]

Firefox unterstützt dies noch nicht; andere Browser hab ich noch nicht getestet.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Firefox unterstützt dies noch nicht; andere Browser hab ich noch nicht getestet.

In Webkits und IEs funktioniert 'word-break: break-all;'; nicht aber 'word-break: break-strict;'. Firefox und Opera können’s noch nicht.

Qapla'

[Gunnar Bittersmann]

@@sonic:

nuqneH

Was ich brauche, wäre aber eine Lösung, die immer innerhalb des Worts umbricht und nicht versucht, Silbentrennung oder Wortgrenzen zu berücksichtigen.

Textareas zeigen das von dir gewünschte Verhalten, wenn keine anderen Umbruchmöglichkeiten vorhanden sind. Was der Fall ist, wenn du alle Leerzeichen ' ' U+0020 im betreffenden Text durch no-break spaces ' ' U+00A0 bzw. eine Zeichenreferenz ' ' ersetzt. Bearbeiten musst du den Text ja sowieso: zumindest '<' und '&' müssen escapet werden ('<' und '&'). Dabei auch '<br/>' an den Zeilenenden einfügen:

<textarea cols="20" rows="5" readonly="readonly">&lt;div&nbsp;class&nbsp;=&nbsp;"myclassname"&nbsp;id&nbsp;=&nbsp;"myIdentifier"><br/>  
&nbsp;&nbsp;bla!<br/>  
&lt;div></textarea>

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

zumindest '<' und '&' müssen escapet werden ('<' und '&')

Es sei denn in XHTML, das als XML verarbeitet wird; dann ist auch möglich:

<code>[code lang=xml]<![CDATA[[/code]
<div class = "myclassname" id = "myIdentifier">
  bla!
<div>
[code lang=xml]]]></code>[/code]

Qapla'