How to Turn Off Word Wrapping in Html

How to turn off word wrapping in HTML?

You need to use the CSS white-space attribute.

In particular, white-space: nowrap and white-space: pre are the most commonly used values. The first one seems to be what you 're after.

how to turn off the break word in css?

Use white-space: nowrap

p {
white-space: nowrap;
}

If you want use nowrap on only part of a text, you can simply put that text in a span element and then apply nowrap to it.

Another much simpler way to prevent just your hyphenated string from wrapping is to replace the keyboard hyphen with . This will render it as a non-breaking hyphen.

Updated example on jsFiddle

csscss3html

How to stop text from taking up more than 1 line?

div {
white-space: nowrap;
overflow: hidden;
}
<div>testing quite a lot of text that just doesn't wrap because it is too long a run-on sentance with so many useless words for you to not read today despite every effort you make to do so including stretching your browser width to the maximum length unless however you utilized your browser's zooming out feature or manually modifying the CSS in which case you are definitely cheating and ruining this fun little game of me typing out as many words as can be fitted into one ridiculously long run-on sentence of the twenty-first century anno domini using my traditional keyboard and two monitors at 1080p while going through every effort to painstakingly ramble on and on but just not exactly repeating myself short of reusing a couple of words in multiple places throughout this HTML even though that would be about a thousand times easier than what I'm currently doing on this day to pointlessly avoid work regardless of its futility given that it'll only create consequences for myself in having to work harder to catch up later of course all of that notwithstanding moderation efforts to tone back my extensive efforts to make this somewhat enjoyable to read while making it as long as possible who may or may not revert this edit in spite of its usefulness since the previous edit only contained four words that could not possibly wrap even without the CSS changes due to their short nature which is invariably going to create more questions than it answers such as can be found in the comments section which is exactly why I created this effort in order to address one of those about the purpose of the overflow attribute which if you have modified you will now see lets you read the entirety of this text through the benefits of horizontal scrolling features but on the other hand if only overflow was used and text-wrap was left out then you will continue to see a vertical scrollbar unless you set a fixed height for this div in which case you certainly should see that vertical overflow is hidden though that would only happen if you did not put this example into fullscreen short of having your viewport set to a small enough height which can actually be further defined to a designated number of lines as opposed to one by using a height set to a multiple of the CSS property defined by line-height which could be a percentage of white-space and that would indeed hide the vertical overflow of this mountain of text which I'm really quite surprised that you managed to linger on here to read through its frivolous nature on the famed site known by programmers as Stack Overflow and for that I congratulate you for potentially wasting your time</div>

Disable text wrapping

you should add some classes ...

<table class="tbl-emails">

and then

.tbl-emails td { white-space: nowrap; }

Stop word-wrap in html

Try:

.menu{
white-space: nowrap;
...

Add that to your CSS.

Stop word wrapping

Here's how to cut the text off in a single line, based on the width of the element:

document.querySelector('button').addEventListener('click',function() {   document.querySelector('p').classList.toggle('expanded');  });
p {    text-overflow: ellipsis;    overflow: hidden;    white-space: nowrap;    }
p.expanded { text-overflow: initial; white-space: initial;}
p.expanded+button { display: none; }
<p>n vitae aliquet mi. Aliquam imperdiet orci ipsum, vel facilisis quam venenatis a. Donec rhoncus lectus sit amet fringilla accumsan. Vivamus convallis risus eu porta porta. Aenean blandit varius ultrices. Integer metus tellus, tristique ac cursus quis, tempor sit amet turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam accumsan laoreet orci eget fringilla. Maecenas ac imperdiet orci. Morbi imperdiet accumsan augue nec ultrices. Donec arcu felis, molestie a metus in, feugiat molestie libero. In sit amet odio ut neque posuere ultrices eu at felis. Donec et bibendum ligula, at varius massa. In velit neque, egestas in velit venenatis, sagittis ornare odio.</p><button>More...</button>  

How to remove word wrap from textarea?

Textareas shouldn't wrap by default, but you can set wrap="soft" to explicitly disable wrap:

<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea>

EDIT: The "wrap" attribute is not officially supported. I got it from the german SELFHTML page (an english source is here) that says IE 4.0 and Netscape 2.0 support it. I also tested it in FF 3.0.7 where it works as supposed. Things have changed here, SELFHTML is now a wiki and the english source link is dead.

EDIT2: If you want to be sure every browser supports it, you can use CSS to change wrap behaviour:

Using Cascading Style Sheets (CSS), you can achieve the same effect with
white-space: nowrap; overflow: auto;.
Thus, the wrap attribute can be regarded as outdated.

From here (seems to be an excellent page with information about textarea).

EDIT3: I'm not sure when it changed (according to the comments, must've been around 2014), but wrap is now an official HTML5 attribute, see w3schools. Changed the answer to match this.

Stop word-wrap dividing words

use white-space: nowrap;. If you have set width on the element on which you are setting this it should work.

update -
rendered data in Firefox
alt text

HTML/CSS textarea - how to prevent word-wrap only for words with hyphen

Add white-space: nowrap; on to the textarea element. But yes, as you mentioned it does not fit.

Edit ~ added wrap="off" to HTML textarea element.

#wrap {
width: 250px;
position: relative;
font-family: sans-serif;
height: 80px;
}

#wrap .area {
resize: none;
outline: none;
display: block;
width: 100%;
padding: 0;
position: absolute;
top: 0;
font-family: sans-serif;
font-size: 20px;
text-align: center;
}

#wrap textarea.area {
left: 0;
height: 100%;
border: 2px solid;
background: transparent;
}

textarea {
/* white-space: nowrap; ~ is replaced by wrap="off" in HTML */
}
<div id="wrap" style="height: 300px;">
<textarea name="test" class="area" style="font-family: Comic Sans MS;" wrap="off">Line1
Line2
Line3-ShouldBeStillLine3-StillLine3</textarea></div>


Related Topics



Leave a reply



Submit