350

I have a long text inside a div with defined width:

HTML:

<div>Stack Overflow is the BEST!!!</div>

CSS:

div {
    border: 1px solid black;
    width: 70px;
}

How could I force the string to stay in one line (i.e., to be cut in the middle of "Overflow")?

I tried to use overflow: hidden, but it didn't help.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746

11 Answers11

662

Try this:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Bazzz
  • 26,427
  • 12
  • 52
  • 69
104

Use white-space:nowrap and overflow:hidden

http://jsfiddle.net/NXchy/8/

anothershrubery
  • 20,461
  • 14
  • 53
  • 98
73

In your CSS section, use white-space: nowrap;.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Rob Agar
  • 12,337
  • 5
  • 48
  • 63
26

div {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<div>Stack Overflow is the BEST!!!</div>
gogaz
  • 2,323
  • 2
  • 23
  • 31
Bozlur Rahman
  • 507
  • 4
  • 11
13

I made a fiddle:

http://jsfiddle.net/audetwebdesign/kh4aR/

RobAgar pointed out white-space:nowrap.

A couple of things here: You need overflow: hidden if you don't want to see the extra characters poking out into your layout.

Also, as mentioned, you could use white-space: pre (see EnderMB), keeping in mind that pre will not collapse white space whereas white-space: nowrap will.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Marc Audet
  • 46,011
  • 11
  • 63
  • 83
11
div {
    display: flex;
    flex-direction: row;
}

was the solution that worked for me. In some cases with div-lists, this is needed.

Some alternative direction values are row-reverse, column, column-reverse, unset, initial, and inherit. Which do the things you expect them to do.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Pingger Shikkoken
  • 394
  • 1
  • 5
  • 15
7

Add this to your div:

white-space: nowrap;

http://jsfiddle.net/NXchy/1/

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
stephenmurdoch
  • 34,024
  • 29
  • 114
  • 189
4

None of the previous answers worked for me.

There are instances where regardless what you do, and depending on the system (Oracle Designer: Oracle 11g - PL/SQL), divs will always go to the next line, in which case you should use the span tag instead.

This worked wonders for me.

<span float: left; white-space: nowrap; overflow: hidden; onmouseover="rollOverImageSectionFiveThreeOne(this)">
    <input type="radio" id="radio4" name="p_verify_type" value="SomeValue"  />
</span> 
Just Your Text || 
<span id="headerFiveThreeOneHelpText" float: left; white-space: nowrap; overflow: hidden;></span>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Dököll
  • 41
  • 1
  • Huge help on this, this was all that worked for me, probably spent 30 minutes on this, lol. Oddly, I'm not using any of what you mentioned, css, javascript, bootstrap, and some custom css. – edencorbin Dec 23 '15 at 15:39
4

Give this a try. It uses pre rather than nowrap as I would assume you would want this to run similarly to <pre>, but either will work just fine:

div {
    border: 1px solid black;
    max-width: 70px;
    white-space: pre;
}

http://jsfiddle.net/NXchy/11/

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Mike B
  • 12,768
  • 20
  • 83
  • 109
3

in span you need to add : { display: block; }

span {
  width: 70px;
  border: 1px solid black;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  }
<span>Stack Overflow is the BEST!!!</sapn>
Gedeon Mutshipayi
  • 2,871
  • 3
  • 21
  • 42
rachel
  • 31
  • 1
0

Try setting a height, so the block cannot grow to accommodate your text, and keep the overflow: hidden parameter.

Here is an example of what you might like if you need to display two lines high:

div {
    border: 1px solid black;
    width: 70px;
    height: 2.2em;
    overflow: hidden;
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Wouter Simons
  • 2,856
  • 1
  • 19
  • 15
  • In your case the nowrap option is probably better, but I left my answer because I sometimes find myself needing a block that may have some lines wrapping until it overflows like this: http://jsfiddle.net/NXchy/7/ (changed the link from Stephenmurdoch's version, thanks!) – Wouter Simons Mar 08 '11 at 12:22
  • No need for this, what happens if the user wants to bump up the text size using ctrl-+? Keeping the height flexible is better. – Marc Audet Mar 08 '11 at 12:47
  • If the user resizes the text with ctrl-+ is should just work: http://jsfiddle.net/kpKW3/ – Wouter Simons Mar 08 '11 at 13:20
  • Using `em`'s in the `height` keeps it flexible, key point well illustrated here in your example. – Marc Audet Mar 08 '11 at 14:06