...

View Full Version : "Don't break my li text, carry down to next line if needed"



ptrcao
12-12-2010, 03:31 PM
"Don't break my li text, carry down to next line if needed"

That's what I want to specify in my css so that my horizontal (a.k.a. "inline") list does not contain broken up text when it reaches the end of the line:


Common Sayings
<ul.inline>
<li> An apple a day keeps the doctor away </li>
<li> People in glass houses should not throw stones </li>
<li> What goes around comes around </li>
</ul>

Now this is an inline list and it will run across the page. When it reaches the end I want it not to break up any of my text, but to carry the li container's text down to the next line if need be.

Excavator
12-12-2010, 04:46 PM
Hello ptrcao,
Both display: inline; and float: left; can do that.
See this example -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
margin: 30px auto;
background: #999;
overflow: auto;
}
/*float version*/
ul.inline li {
margin: 0 0 0 20px;
float: left;
}
/* inline version
ul.inline li {
display: inline;
white-space: nowrap;
}*/
</style>
</head>
<body>
<div id="container">
<h3>Common Sayings</h3>
<ul class="inline">
<li> An apple a day keeps the doctor away </li>
<li> People in glass houses should not throw stones </li>
<li> What goes around comes around </li>
</ul>
<!--end container--></div>
</body>
</html>

agxphoto
12-12-2010, 05:14 PM
white-space:nowrap will keep an element together.


white-space:pre-line is what prevents the line breaks.

Using those two in combination, I came up with the following solution:


<HTML>
<style type="text/css">
p{display:inline;white-space:nowrap;}
preline{display:inline;white-space:pre-line;}
</style>
Common Sayings
<div id="preline">
<p>An apple a day keeps the doctor away </p>
<p>People in glass houses should not throw stones </p>
<p>What goes around comes around </p>
</div>
</HTML>

This wraps the whole group as a division with the pre-line condition, and then each internal line is treated as nowrap.


When that's applied to a list, though, you will lose the bullets. It may be helpful to fake them in as special characters; symbol entity
&bull will provide one.

Arbitrator
12-13-2010, 09:21 AM
"Don't break my li text, carry down to next line if needed"

That's what I want to specify in my css so that my horizontal (a.k.a. "inline") list does not contain broken up text when it reaches the end of the line:


Common Sayings
<ul.inline>
<li> An apple a day keeps the doctor away </li>
<li> People in glass houses should not throw stones </li>
<li> What goes around comes around </li>
</ul>

Now this is an inline list and it will run across the page. When it reaches the end I want it not to break up any of my text, but to carry the li container's text down to the next line if need be.I assume that you mean "complete, individual li elements" by "li container's [sic]" and that "<ul.inline>" is some kind of pseudo-code to indicate that all of the li elements are being displayed inline (e.g., with display: inline).

If so, this is a bit easier than agxphoto made it out to be:


li { white-space: nowrap; }

All this does is prevent line-breaking opportunities within the selected elements. An entire element can break onto a new line, but there can't be any intra-element breaks.



white-space:nowrap will keep an element together.


white-space:pre-line is what prevents the line breaks.

Using those two in combination, I came up with the following solution:


<HTML>
<style type="text/css">
p{display:inline;white-space:nowrap;}
preline{display:inline;white-space:pre-line;}
</style>
Common Sayings
<div id="preline">
<p>An apple a day keeps the doctor away </p>
<p>People in glass houses should not throw stones </p>
<p>What goes around comes around </p>
</div>
</HTML>

This wraps the whole group as a division with the pre-line condition, and then each internal line is treated as nowrap.I'm at a bit of a loss for why you're using white-space: pre-line. It doesn't seem to be necessary here.


When that's applied to a list, though, you will lose the bullets. It may be helpful to fake them in as special characters; symbol entity
&bull will provide one.Alternatively, these can be generated via CSS:


li::before { content: "\2022\a0"; /* U+2022 BULLET & U+00A0 NO-BREAK SPACE */ }
/* CSS2.1 pseudo-element syntax (|:before| (with one colon)) is better supported than the CSS3 syntax (with two colons) */



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum