CODEWITHSUNDEEP
htmlcss
Misha Moroshko
Misha Moroshko

Reputation: 171341

How can I force div contents to stay in one line with HTML and CSS?

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.

Upvotes: 363

Views: 574079

Answers (11)

rachel
rachel

Reputation: 51

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!!!</span>

Upvotes: 5

Bozlur Rahman
Bozlur Rahman

Reputation: 547

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

Upvotes: 29

Pingger Shikkoken
Pingger Shikkoken

Reputation: 416

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.

Upvotes: 12

stephenmurdoch
stephenmurdoch

Reputation: 34613

Add this to your div:

white-space: nowrap;

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

Upvotes: 7

D&#246;k&#246;ll
D&#246;k&#246;ll

Reputation: 41

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>

Upvotes: 4

Marc Audet
Marc Audet

Reputation: 46785

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.

Upvotes: 13

Mike B
Mike B

Reputation: 12797

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/

Upvotes: 4

Bazzz
Bazzz

Reputation: 26922

Try this:

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

Upvotes: 683

Wouter Simons
Wouter Simons

Reputation: 2906

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;
}

Upvotes: 0

Rob Agar
Rob Agar

Reputation: 12459

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

Upvotes: 74

anothershrubery
anothershrubery

Reputation: 21003

Use white-space:nowrap and overflow:hidden

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

Upvotes: 106

Related Questions