342

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.

1
  • 28
    white-space: nowrap put this in your style tag.
    – Moshi
    Sep 29, 2016 at 13:19

11 Answers 11

653

Try this:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}
0
100

Use white-space:nowrap and overflow:hidden

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

2
  • 46
    Add text-overflow:ellipsis; to above for better look.
    – tj-recess
    Jan 19, 2016 at 22:50
  • can this be achieved with no css?
    – nilon
    Jul 24, 2017 at 19:07
71

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

23

div {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<div>Stack Overflow is the BEST!!!</div>

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.

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.

7

Add this to your div:

white-space: nowrap;

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

1
  • 1
    you can add: overflow: auto to display a horizontal scrollbar
    – Sarah West
    Mar 8, 2011 at 12:21
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/

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>
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, 2015 at 15:39
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>

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;
}
4
  • 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: jsfiddle.net/NXchy/7 (changed the link from Stephenmurdoch's version, thanks!) Mar 8, 2011 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 8, 2011 at 12:47
  • If the user resizes the text with ctrl-+ is should just work: jsfiddle.net/kpKW3 Mar 8, 2011 at 13:20
  • Using em's in the height keeps it flexible, key point well illustrated here in your example.
    – Marc Audet
    Mar 8, 2011 at 14:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.