Denoting a preferred place for a line break
By using
span.avoidwrap { display:inline-block; }
and wrapping the text I want to be kept together in
<span class="avoidwrap"> Text </span>
it will wrap first in preferred blocks and then in smaller fragments as needed.
Specifying a preferred line break point in HTML text in a responsive design
I think this works very well:
span.line {
display: inline-block;
}
<p>
<span class="line">This text should break</span>
<span class="line">after the word "break"</span>
</p>
The text still breaks on other places when there is not enough space:
open demo
How to line-break an HTML list on last possible white space
This seems to work for me:
ul {
max-width: 100px;
}
ul li {
display: inline;
}
ul li::after {
content:" ";
}
Why the after
part?
Well, unless there is a white-space / new-line after each <li>
in the HTML source, the line won't break at the end of items, which may very well cause a "premature" line-break (as in the failed attempt #3). Some frameworks automatically "squeeze" the HTML -- basically removing these white-spaces -- and this requires an explicit space to be added after each item.
Here's a Fiddle examples (try removing the after
from the css
and see how you get failed attempt #3).
Denoting a preferred place for a line break
By using
span.avoidwrap { display:inline-block; }
and wrapping the text I want to be kept together in
<span class="avoidwrap"> Text </span>
it will wrap first in preferred blocks and then in smaller fragments as needed.
span + sup having a white-space inbetween caused by a line-break
They are treated as white space, so one or more line-breaks are treated as a single whitespace (just like all the other white space characters)
A line break is defined to be a carriage return (
), a line
feed (), or a carriage return/line feed pair. All line breaks
constitute white space.
http://www.w3.org/TR/html401/struct/text.html#line-breaks
Optional line-breaking HTML entity that is always invisible
is the HTML entity for a unicode character called the zero-width space (ZWSP).
"In HTML pages, this space can be used as a potential line-break in long words as an alternative to the
<wbr>
tag."- Zero-width space - Wikipedia
The <wbr>
tag also works, as mentioned by Aaron's answer. I think I prefer the HTML entity over the tag because the entity seems simpler: unicode handles it, not the web browser.
Prevent line break in this case
try this:
.line {
height: 44px;
width: 100%;
display: inline-block;
background-color: #6c7987;
white-space: nowrap;
position: relative;
}
.icon {
position: absolute;
left: 0;
height: 44px;
width: 90px;
background-color:
#FF0080;
color: white;
text-align: center;
line-height: 44px;
font-family: Arial;
float: left;
font-size: 12px;
font-weight: bold;
padding: 0;
}
.title {
position: absolute;
left: 90px;
color: white;
line-height: 44px;
text-align: left;
padding: 0 0 0 10px;
font-family: Arial;
float: left;
font-size: 12px;
display: inline;
white-space:nowrap;
}
.botoes {
position: absolute;
width: 300px;
right: 0
}
.botao {
width: 46px;
height: 45px;
float: right;
line-height: 44px;
text-align: center;
display: block;
white-space:nowrap;
cursor: pointer;
}
.botaoVerRecurso {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoVerRecurso:hover {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoEditarRecurso {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoEditarRecurso:hover {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoFavRecurso {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoFavRecurso:hover {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoPartRecurso {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoPartRecurso:hover {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoApagarRecurso {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoApagarRecurso:hover {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.clear {
clear: both;
}
The explanation is simple: with floating, you can't put more width to a holder, which is bigger than the holder's height, the float will automatically drops it, and breaks line.
If you use positions, use it like this:
CONTAINER (position: relative)
SUBelement (posision: absolute, top: 0, left: 0) < put to the top left
SUBelement (posision: absolute, bottom: 0, right: 0) < put to the bottom right
in W3C: http://www.w3schools.com/css/css_positioning.asp
Line break before and after ul not equal
First: Don't use <br>
for layouting, use CSS.
To your problem: The first <br>
breaks the text to a new line. This means, that there is no spacing between the 'hi' and the <ul>
, because the <ul>
starts directly at the new line. The <ul>
is a block element and automatically pushes the text after to a new line. Then, the 2nd <br>
comes and breaks to a new line again. This creates the larger spacing.
hi
<br> // linebreak
<ul> // <ul> starts directly at this new line
<li>test</li>
</ul> // <ul> is a block element and pushes the element after to a newline
<br> // another new line is added (there comes your empty space from)
hi
Related Topics
How to Change the Opacity (Alpha, Transparency) of an Element in a Canvas Element
How to Get the Collection of Model State Errors in ASP.NET MVC
How to Make in CSS an Overlay Over an Image
How to Center an Iframe Horizontally
What Do <Form Action="#"> and <Form Method="Post" Action="#"> Do
CSS Image Resize Percentage of Itself
Heading with Horizontal Line on Either Side
Aligning Decimal Points in HTML
How to Vertically Center a Bootstrap Carousel-Caption
Html5 Video // Completely Hide Controls
Why Do Firefox and Opera Ignore Max-Width Inside of Display: Table-Cell
Using HTML5 Canvas - Rotate Image About Arbitrary Point
Paying for Multiple Items (At Once) via Paypal
Multiple Forms or Multiple Submits in a Page
Image Scaling Causes Poor Quality in Firefox/Internet Explorer But Not Chrome