Menu
Is there a way to word wrap only when there's white space? Right now I have it breaking one some special characters (?-!) but I only want to it to break at the tabs to keep the columns straight.
Example:
gw5g7#IVKNcvP02r pFJxywU#B-L.Qp.f [email protected],GtR !t1oa(2%?tb()lML -cky!YT8-/*xsCfT nbjAekWZenH8udR8 sM*e@aSM#89C#$4Z (r6+$]1j9mw)U72+ !V2O2_UO7(mMM6HP o6u?D&97&QNJ93D1 .a,,hg%vtl[^PGLO F(v*CP#aJD13_m&. /9?[OL?ktCmv8gRP 6CSZuRuu98MT3*,R O/cclHD+HrG4G^h9 JI]edN.F]hRg8,&n -6S/S9U[Ai]Sh[8D LM+Gpkk7-BP1pgpR -XX4EZjb24Kl9Kgm j!eK#0?i&kwo&ADg lvZ@)T%xRFYOV#-.
375
A white space can be a sequence of spaces (entered using the space or the tab keys) or a line break (entered using the carriage return key (or the Enter key), or <br/> ).
A line-break can be added in HTML, using only CSS, by employing the pseudo-class ::after or ::before . In the stylesheet, we use these pseudo-classes, with the HTML class or id, before or after the place where we want to insert a line-break. In myClass::after : Set the content property to "\a" (the new-line character).
nowrap : Multiple whitespaces are collapsed into one, but the text doesn't wrap to the next line. We've already discussed how to use the nowrap value to prevent line breaks. pre : Same results as using the <pre> where all the whitespaces will be kept as is and the text only wraps when line breaks are in the content.
To do a line break in HTML, use the <br> tag. Simply place the tag wherever you want to force a line break.
No, there is currently no way in CSS way to word wrap only when there’s white space. The reason is that browsers apply, rather inconsistently, some of the Unicode line breaking rules. The rules allow line breaks at many points, e.g. after some punctuation characters in some contexts. In the CSS3 Text draft, there are some proposed additions that would let authors have better control over such issues, but mainly as regards to rendering East Asian languages.
You would need to wrap pieces of text in elements (like span) and set white-space: nowrap on them, or use the more concise nonstandard but widely supported nobr element. In the example case, this would be rather straightforward and could be done with a small piece of JavaScript code (or server-side or in a preprocessor when the page is generated):
<nobr>gw5g7#IVKNcvP02r</nobr> <nobr>pFJxywU#B-L.Qp.f</nobr>...
However, it is not clear whether the multiple spaces should be preserved and what the rendering context is (pre? textarea?). This is a different problem and best addressed as a separate question.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
