Denoting a Preferred Place for a Line Break

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:

screenshot

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



Leave a reply



Submit