How can I wrap text so it completely fills each line of the container?

[Michael Harrison]

Consider this HTML:

<div style="width:10em; border:solid 1px #000; word-wrap:break-word">
yt-html5-player-modules::subtitlesModuleData::display-settings
</div>

The text contains no spaces, but all the browsers I've tested will
wrap it after the '-' between 'player' and 'modules', even though
there's space remaining on the line. How can I force content like this
to only wrap at the end of the lines?

I would like to display it like this if possible:

----------------------
|yt-html5-player-modu|
|les::subtitlesModule|
|Data::display-settin|
|gs |
----------------------

Thanks.

[dorayme]

In article
<76c29823-2d7f-4a3f...@l15g2000vbv.googlegroups.com>,

You cannot guarantee this look if people use different fonts and sizes
to what you are expecting with your code.

You would have a better chance of getting close to what you want with

<div style="float: left; border:solid 1px #000;">
yt-html5-player-modu<br>
les::subtitlesModule<br>
Data::display-settin<br>
gs
</div>

The float is merely to do auto shrink to fit. If you need to guess a
width and not use a float, I suggest a margin of error with bigger
than 10em, maybe 11 or 12. There are other shrink to fit css
instructions you can use instead of float, if floating makes you
uncomfortable or is otherwise unsuitable.

--
dorayme

[Gus Richter]

On 5/4/2012 12:33 AM, dorayme wrote:
> <div style="float: left; border:solid 1px #000;">
> yt-html5-player-modu<br>
> les::subtitlesModule<br>
> Data::display-settin<br>
> gs
> </div>
>
> The float is merely to do auto shrink to fit.

How so?

--
Gus

[Michael Harrison]

On May 4, 5:33 am, dorayme <dora...@optusnet.com.au> wrote:

> You cannot guarantee this look if people use different fonts and sizes
> to what you are expecting with your code.
>
> You would have a better chance of getting close to what you want with
>
> <div style="float: left; border:solid 1px #000;">
> yt-html5-player-modu<br>
> les::subtitlesModule<br>
> Data::display-settin<br>
> gs
> </div>
>
> The float is merely to do auto shrink to fit. If you need to guess a
> width and not use a float, I suggest a margin of error with bigger
> than 10em, maybe 11 or 12. There are other shrink to fit css
> instructions you can use instead of float, if floating makes you
> uncomfortable or is otherwise unsuitable.
>

Thanks, but I suspect my question wasn't clear enough. The example I
gave was just an example, I wasn't asking how to wrap that specific
text. :)

Let me try asking in a more general way then: If I have some unknown
random text to display in a fixed-width DIV, how can I get the browser
to only wrap that text at the very end of each line? So that each line
of text (except possibly the last) is exactly the same width.

[Jukka K. Korpela]

2012-05-04 6:28, Michael Harrison wrote:

> Consider this HTML:
>
> <div style="width:10em; border:solid 1px #000; word-wrap:break-word">
> yt-html5-player-modules::subtitlesModuleData::display-settings
> </div>

The word-wrap: break-word setting wasn't really designed for use like
this. It is meant to specify that in emergency situations, where the
text would overflow from its container, a line break is allowed at any
point, after any character. It is not meant to suppress normal line
breaking behavior.

> The text contains no spaces, but all the browsers I've tested will
> wrap it after the '-' between 'player' and 'modules',

You didn't test on sufficiently many browsers. Breaking after a hyphen
is relatively new in browserworld - an old feature in IE, newer in
Firefox. And even in newest Firefox, the feature is conditional: Firefox
breaks (when needed) after hyphen in foobar-blabla but not in foo-bla,
still less in f-b (which may get broken by IE!). This makes sense for
normal text: you want to let long hyphenated compounds to be broken
after the hyphen, but short compounds are better kept together.

Line breaking behavior in browsers is an ugly mess, see
http://www.cs.tut.fi/~jkorpela/html/nobr.html

> even though
> there's space remaining on the line.

Yep, that's because word-wrap: break-word is for emergencies only, and
there's no emergency here.

> How can I force

You cannot force anything in CSS. See
http://www.cs.tut.fi/~jkorpela/css-caveats.html

> content like this
> to only wrap at the end of the lines?

For the specific case, it would suffice to replace each hyphen by the
nonbreaking hyphen U+2011 (which you might want to enter as &#x2011:,
especially since the nasty Windows clipboard seems to change the
nonbreaking hyphen to a normal hyphen...). Beware that the nonbreaking
hyphen is present in a few fonts only and may mess up line spacing if
you don't say line-height: 1.3 or something like that.

But if your string contained, say, "(" or "%", you would have the
problem that some browsers break after them, too. And U+FEFF doesn't
seem to be honored by browsers. So this leaves us...

... the magnificent ZWSP, the Zero-Width Space!

Insert it, i.e. U+200B, after each character. If you use the character
reference, your HTML code will look real crap, but it will work (on
modern browsers in most days):

y&#x200b;t&#x200b;-&#x200b;h&#x200b;t&#x200b;m&#x200b;...

If you generate the HTML code programmatically, you can just emit U+200B
as a UTF-8 encoded character, saving some bytes.

Sorry, non-CSS solution. You don't even need word-wrap:break-word if you
use this solution (though you might keep it too, just in case some odd
browser honors it but doesn't honor the magnificent ZWSP).

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[dorayme]

In article
<b2045b9c-9529-407f...@z17g2000yqf.googlegroups.com>,

Michael Harrison <mjh...@yahoo.co.uk> wrote:

> On May 4, 5:33 am, dorayme <dora...@optusnet.com.au> wrote:
>
> > You cannot guarantee this look if people use different fonts and sizes
> > to what you are expecting with your code.
> >
> > You would have a better chance of getting close to what you want with
> >
> > <div style="float: left; border:solid 1px #000;">
> > yt-html5-player-modu<br>
> > les::subtitlesModule<br>
> > Data::display-settin<br>
> > gs
> > </div>
> >
> > The float is merely to do auto shrink to fit. If you need to guess a
> > width and not use a float, I suggest a margin of error with bigger
> > than 10em, maybe 11 or 12. There are other shrink to fit css
> > instructions you can use instead of float, if floating makes you
> > uncomfortable or is otherwise unsuitable.
> >
>
> Thanks, but I suspect my question wasn't clear enough. The example I
> gave was just an example, I wasn't asking how to wrap that specific
> text. :)
>

Sorry, I get into these literal moods! Can't think of a *good* CSS
solution right now.

> Let me try asking in a more general way then: If I have some unknown
> random text to display in a fixed-width DIV, how can I get the browser
> to only wrap that text at the very end of each line? So that each line
> of text (except possibly the last) is exactly the same width.

Korpela has taken the edge off my curiosity, see his post! He does
this now and then! Following up his suggestion: in my editor, BBEdit,
with GREP turned on, I can add the magnificent Zero-Width Space to the
spaces around the atoms in *your* text with something like

Search for: (.)

Replace with: \1\&#x200b;

I mention in case you have such a facility, you can fiddle about to
make a pattern that works more generally still.

--
dorayme

[tlvp]

Perhaps your browsers break preferentially at hyphens, where available?

Just a stab in the dark, of course, that ... :-) . Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.

[Michael Harrison]

Jukka K. Korpela wrote:
>So this leaves us...
>
> ... the magnificent ZWSP, the Zero-Width Space!
>
> Insert it, i.e. U+200B, after each character. If you use the character
> reference, your HTML code will look real crap, but it will work (on
> modern browsers in most days):
>
> y&#x200b;t&#x200b;-&#x200b;h&#x200b;t&#x200b;m&#x200b;...
>
> If you generate the HTML code programmatically, you can just emit U+200B
> as a UTF-8 encoded character, saving some bytes.

Thanks! That works well, and seems to be the best solution, even
though it's a bit of a hack.

CSS3 has word-break: break-all which seems to do what I want, but this
isn't currently implemented in all browsers (notably not Firefox - see
https://bugzilla.mozilla.org/show_bug.cgi?id=249159).

http://www.w3.org/TR/css3-text/#word-break

[Jonathan N. Little]

Sticking with more supported CSS2.1 'word-spacing' you can inject a
"lighter" single space character coupled with a negative length
word-spacing will also work. If you need an actual visual space between
some words use '<space>&nbsp;<space>'. I made the DIV a percentage to
demonstrate the wrap:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Alternate</title>

<style type="text/css">
div.breakable { width: 10%; word-spacing: -.15em; border: 1px solid
red; }
</style>

</head>
<body>
<div class="breakable">
y t - h t m l 5 - p l a y e r - m o d u l e s : : s u b t i t l e s M
o d u l e D a t a : : d i s p l a y - s e t t i n g s &nbsp; m a y
&nbsp; w o r k &nbsp; w i t h &nbsp; e x t r a &nbsp; s p a c e s &nbsp;
a n d &nbsp; n e g a t i v e &nbsp; w o r d s p a c i n g
</div>
</body>
</html>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Jukka K. Korpela]

2012-05-05 17:35, Jonathan N. Little wrote:

> Sticking with more supported CSS2.1 'word-spacing' you can inject a
> "lighter" single space character coupled with a negative length
> word-spacing will also work.

Not for most values of "work". I won't even mention what the approach
causes when CSS is disabled.

> div.breakable { width: 10%; word-spacing: -.15em; border: 1px solid red; }

Reducing word spacing by 0.15em does not cancel the spacing caused by
the added spaces. So the characters appear with increased spacing.

The width of the space character is typically 0.25em but varies by font.
According to Microsoft's font design principles, the minimum width is
0.2em and the maximum is 0.5em.
( http://www.microsoft.com/typography/developers/fdsspec/spaces.htm )

The conclusion is that there is no reliable way to nullify the effect of
a space character using CSS.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[dorayme]

In article <jo3jfj$7c7$1...@dont-email.me>,

However true, that is not quite "the" conclusion to Jonathan's brave
attempt. What's the expression... absence of evidence is not evidence
of absence...

--
dorayme

[Jukka K. Korpela]

2012-05-06 0:50, dorayme kirjoitti:

>> The conclusion is that there is no reliable way to nullify the effect of
>> a space character using CSS.
>
> However true, that is not quite "the" conclusion to Jonathan's brave
> attempt. What's the expression... absence of evidence is not evidence
> of absence...

I don't know which logic you are applying here, but "the conclusion" was
"the conclusion that is relevant in this context".

If you wish to try to use spaces (to create line breaking opportunities)
preventing them to occupy any horizontal space, then a negative word
spacing is just a dead end. Things would be different if CSS had a unit
that corresponds to the width of a space in the current font.

But there is a different approach. Wrap the space character in an inline
container, and set its width to zero.
(See http://www.cs.tut.fi/~jkorpela/html/nobr.html#tricks for details.)

That would require bulky markup and it, too, would suffer from the
problem that when CSS off, the text looks foolishly spaced.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Patricia Aldoraz]

If the div is left au natural, it might fill the width of the browser,
the border and background might be wanted to be in keeping with the
tight fitting look of the rest - you know, that sexy clinging mean
look as the this element cavorts thru cyberspace.

[Gus Richter]

I wrongly thought dorayme was providing a solution to the OP's question
of tightly fitting the full text within the given area. I was fixated
and did not consider a digression.

BTW, I note a similarity in style of writing to that of dorayme. Try to
incorporate aliens and such within the text. Oh and I believe you meant
"au naturel". Also, I do understand that the float deflates the rigid
div envelope to the text content member - you say "shrink to fit", I say
"shrink-wrap".

--
Gus

[Patricia Aldoraz]

On May 7, 1:51 pm, Gus Richter <gusrich...@netscape.net> wrote:
> On 5/6/2012 6:17 PM, Patricia Aldoraz wrote:
>
> > On May 4, 3:28 pm, Gus Richter<gusrich...@netscape.net>  wrote:
> >> On 5/4/2012 12:33 AM, dorayme wrote:
>

...

>
> >>> The float is merely to do auto shrink to fit.
>
> >> How so?
>
> > If the div is left au natural, it might fill the width of the browser,
> > the border and background might be wanted to be in keeping with the
> > tight fitting look of the rest - you know, that sexy clinging mean
> > look as the this element cavorts thru cyberspace.
>
> I wrongly thought dorayme was providing a solution to the OP's question
> of tightly fitting the full text within the given area. I was fixated
> and did not consider a digression.
>

> BTW, I note a similarity in style of writing to that of dorayme. ...

> you say "shrink to fit", I say
> "shrink-wrap".
>

dorayme says shrexpand sometimes! Anyway, what do I really care? It
says a lot of things and often far too many things. Best to do what
most people do anyway and ignore the poor thing.

Apparently, it confided in me, you insulted it recently and *hurt its
feelings*! Casting aspersions on its mental state and putting down its
fondness for the false worlds of film and TV. It is a *very sensitive
little thing* . It expressed *some* friendliness towards you and
pointed out that this was the reason it felt *so affronted*. It is
undergoing counselling at the local Dale Carnegie Centre. (I heard it
was so pissed off in the *early* sessions that several *burly*
counsellors were needed to be in attendance. It is now, I understand,
down to only half a dozen per session).

[Gus Richter]

On 5/7/2012 12:19 AM, Patricia Aldoraz wrote:
> dorayme says shrexpand sometimes! Anyway, what do I really care? It
> says a lot of things and often far too many things. Best to do what
> most people do anyway and ignore the poor thing.

That is very unkind since she is very valuable here and has a lot of
correct and helpful things to say, although, to my taste, often in a too
colourful way.

> Apparently, it confided in me, you insulted it recently and *hurt its
> feelings*! Casting aspersions on its mental state and putting down its
> fondness for the false worlds of film and TV. It is a *very sensitive

> little thing* . It expressed*some* friendliness towards you and
> pointed out that this was the reason it felt*so affronted*. It is

> undergoing counselling at the local Dale Carnegie Centre. (I heard it
> was so pissed off in the*early* sessions that several*burly*
> counsellors were needed to be in attendance. It is now, I understand,
> down to only half a dozen per session).

Are you sure you're not dorayme in disguise? The style is the same.
I do not recall the incident. I looked back in my news reader and found
no such message by me, although I must admit that I auto-retain only
messages within the last 60 days. I accept that crassness surfaces at
times and I may have 'lost it' and for that I truly am sorry and do
apologize.

--
Gus

[Patricia Aldoraz]

On May 8, 4:08 am, Gus Richter <gusrich...@netscape.net> wrote:
> On 5/7/2012 12:19 AM, Patricia Aldoraz wrote:
>

...

>
> Are you sure you're not dorayme in disguise?

I can't say I am *completely* sure. It may not be possible to be it
*in disguise* Think this way, you go into a theatre props and clothing
basement and you see some starched upright uniform, someone has
plonked a hat, maybe a military Bonaparte one, on top. It is a sort of
disguise event, a clothing sculpture, a would-be exhibit, there is no
obvious living thing in there, no failed would be vanquisher of
Moscow, not much of anything really. The point is that no other dummy
in that basement or anywhere else could really be a disguise for that
pile. I know, it is hard to get a rational head around such nonsense.
I try not to think about it.

Hang on ... I am losing visibility... I am disappearing ...O God!... I
am being display: hiddened by an outside author-force, how cruel is
this... not even display: autoed so that folk can scroll to see what
else I think.... This is terrible! My only hope now is that CSS gets
*turned off*. <g>

[Gus Richter]

I'm going to turn you off by grabbing for my bottle of Rye Whiskey.

--
Gus

[Ben C]

On 2012-05-07, Patricia Aldoraz <patricia...@gmail.com> wrote:
> On May 8, 4:08 am, Gus Richter <gusrich...@netscape.net> wrote:
>> On 5/7/2012 12:19 AM, Patricia Aldoraz wrote:
>>
> ...
>>
>> Are you sure you're not dorayme in disguise?

[...]

> Hang on ... I am losing visibility... I am disappearing ...O God!... I
> am being display: hiddened by an outside author-force, how cruel is
> this... not even display: autoed so that folk can scroll to see what
> else I think.... This is terrible! My only hope now is that CSS gets
> *turned off*. <g>

I think the real dorayme would have known it's overflow not display.