C++

Forum

 
CSS word-wrap and line breaks

Duthomhas (13212)
Does anyone know the CSS to force line breaks to occur only at maximum letter?

This is very unusual. Instead of:

Jack Sprat could eat no fat. His   
wife could eat no lean. And so 
betwixt them both, you see, they 
licked the platter clean.

I want:

Jack Sprat could eat no fat. His wi
fe could eat no lean. And so betwix
t them both, you see, they licked t
he platter clean.

Thanks!
LB (13399)
You could try making every character inside its own tag set to display as inline-block.

http://jsfiddle.net/74k6qkxr/

I don't know much about CSS myself, though.
Last edited on
giblit (3750)
This might help, though I personally have not coded in CSS but looks like what you want.


https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap

break-word
Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.


Another site possibly better css reference.
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
// http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

<!DOCTYPE html>
<html>
<head>
<style> 
p.test {
    width: 10em; 
    border: 1px solid #000000;
    word-wrap: break-word;
}
</style>
</head>
<body>

<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

This paragraph contains
a very long word:
thisisaveryveryveryvery
veryverylongword. The 
long word will break
and wrap to the next
line.



Edit after doing some more playing around, it looks like word-break: break-all is more appropriate than word-wrap: break-word

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!DOCTYPE html>
<html>
<head>
<style> 
p.test {
    width: 14em;
    word-break: break-all

}
</style>
</head>
<body>

<p class="test">Jack Sprat could eat no fat. His wife could eat no lean. And so betwixt them both, you see, they licked the platter clean.</p>

</body>
</html>

Jack Sprat could eat no fat. His wi
fe could eat no lean. And so betwi
xt them both, you see, they licked
the platter clean.
Last edited on
LB (13399)
It doesn't seem to be working:
http://jsfiddle.net/y5kvfyne/
Duthomhas (13212)
Yeah, I've been playing with all the white-space, word-wrap, and word-break properties -- I'm not sure there is a standard way to do what I want.

What I've got right now is a bunch of &nbsp;s to force "no otherwise acceptable break points in the line."

Alas. Thanks anyway.
Topic archived. No new replies allowed.