How do you prevent text from breaking in css?

Is there a word-wrap or any other attribute that stops text from wrapping? I have a height, and overflow:hidden, and the text still breaks.

Needs to work in all browsers, before CSS3.

isherwood

54.3k15 gold badges105 silver badges147 bronze badges

asked Feb 21, 2009 at 4:58

div {
  white-space: nowrap;
  overflow: hidden;
}

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

Note: this only works on block elements. If you need to do this to table cells (for example) you need to put a div inside the table cell as table cells have display table-cell not block.

As of CSS3, this is supported for table cells as well.

Pluto

2,79727 silver badges36 bronze badges

answered Feb 21, 2009 at 5:03

cletuscletus

604k163 gold badges903 silver badges940 bronze badges

5

You can use the CSS white-space property to achieve this.

white-space: nowrap;

TylerH

21.2k59 gold badges74 silver badges93 bronze badges

answered Feb 21, 2009 at 5:04

Robert C. BarthRobert C. Barth

21.9k6 gold badges45 silver badges52 bronze badges

Using text-overflow: ellipsis will add the ... at the last.

div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

TylerH

21.2k59 gold badges74 silver badges93 bronze badges

answered Apr 7, 2017 at 10:54

VivekVivek

1,40818 silver badges27 bronze badges

1

Sometimes using   instead of spaces will work. Clearly it has drawbacks, though.

The Codesee

3,6483 gold badges35 silver badges73 bronze badges

answered Feb 21, 2009 at 5:01

grossvogelgrossvogel

6,6441 gold badge25 silver badges36 bronze badges

1

Just to be crystal clear, this works nicely with paragraphs and headers etc. You just need to specify display: block.

For instance:

  This is a really long title, but it won't exceed the parent width

(forgive the inline styles)

answered Jan 26, 2019 at 10:22

Duncan JonesDuncan Jones

64.7k26 gold badges184 silver badges244 bronze badges

How do you prevent a line break in CSS?

How do I keep text in one line in CSS?

How do you make words not break?

How do I stop text break in HTML?