Making HTML Content Unbreakable (In One Line)

Making html content unbreakable (in one line)

Add this CSS to the td

white-space: nowrap;

This prevents the automatic line-breaking of HTML. For more info see MDN

Making a piece of text non-breaking?

Use the white-space property:

Hello I am some text Hello I am some text Hello I am some text
Hello I am some text <span class="nobr">I do not wish to be
broken on new lines</span>

with:

span.nobr { white-space: nowrap; }

CSS unbreakable link

if i understand you question right => try this

.nowrap {white-space: nowrap;}

Unbreakable Line in React Native Using Text Component

It seems the nowrap property hasn't been added yet (by the way, Sacha must have ommited the native part here with that span suggestion). So far the only solution I've found was changing the slash symbol to its HTML entity as shown here. I'm aware of the fact that it looks a bit different, but well, it works. Guess we have to use that until the native JSS works as it works.

How can I force text in a new line?

you could try this, but it's not very pretty:

.text
{
    background-color:red;
    width:100px;
    word-wrap: break-word;
}

http://jsfiddle.net/esGEn/1/

CSS or what? Forcing the text split into multiple lines

Applying word-break: break-all; will make the text wrap at whatever character whenever it exceeds it's parent's width, without the need of a space or other type breakpoint.

How to use Pre tag to restrict word break in HTML

See the w3 specification for the word-wrap property:

‘break-word’

An unbreakable "word" may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line. Shaping characters are still shaped as if the word were not broken, and grapheme clusters must together stay as one unit. No hyphenation character is inserted at the break point.

Because you're using the 'break-word' rule, this means that your long words will be broken if there is no width left in the container and if there are no other more acceptable break points.

Instead try using the 'normal' rule:

‘normal’

Lines may break only at allowed break points. However, the restrictions introduced by ‘word-break: keep-all’ may be relaxed to match ‘word-break: normal’ if there are no otherwise-acceptable break points in the line.

text flowing out of div

It's due to the fact that you have one long word without spaces. You can use the word-wrap property to cause the text to break:

#w74 { word-wrap: break-word; }

It has fairly good browser support, too. See documentation about it here.

---

Related Topics