css overflow - only 1 line of text

Question

I have div with the following css style:

width:335px; float:left; overflow:hidden; padding-left:5px;

When I insert, into that div, a long line of text, it's breaking to a new line and displays all the text. What I want is to have only one line of text that will not line-break. When the text is long, I want this overflowing text to disappear.

I was thinking about setting the height but it seems to be wrong.

Maybe if I add height that is the same as the font, it should work and not cause any problems in different browsers?

How can I do that?

Septnuits · Accepted Answer · 2011-09-25 15:16:20Z

493

If you want to restrict it to one line, use white-space: nowrap; on the div.

answered Sep 25, 2011 at 15:16

Septnuits

5,0841 gold badge17 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

SearchForKnowledge Over a year ago

But then it doesn't show the ellipsis if the text goes beyond the dimension specified. stackoverflow.com/questions/26342411/…

Moshi Over a year ago

It works, great. But I need ... if there are more character to show because when length of line long and it goes out of written div.

Eric Over a year ago

This acts weird if the hidden text contains hyper links. If I were to tab through the page it would cause the link in the hidden text to scroll onto the screen, when it should be hidden.

Jake Over a year ago

The overflow styles need to be applied to the innermost block or inline-block element. And if you have an inline-block, you'll need max-width: 100% on that.

Jake Over a year ago

You may also need max-width: 100% on some containing elements. I don't have time to produce an example, so can't post an answer.

Community · Accepted Answer · 2017-05-23 12:02:49Z

95

If you want to indicate that there's still more content available in that div, you may probably want to show the "ellipsis":

text-overflow: ellipsis;

This should be in addition to white-space: nowrap; suggested by Septnuits.

Also, make sure you checkout this thread to handle this in Firefox.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Sep 25, 2011 at 15:32

Mouli

1,66115 silver badges21 bronze badges

3 Comments

Francisco Costa Over a year ago

I believe you must use text-overflow: ellipsis; with overflow: hidden; and white-space: nowrap; to make it work

DanMan Over a year ago

caniuse.com/#feat=text-overflow aka. yes, you can. Consider putting the whole content in the title attribute, so the user has still access to it.

SearchForKnowledge Over a year ago

mine just shows in one line and doesn't populate the DIV before showing the ellipsis... stackoverflow.com/questions/26342411/… (jsfiddle.net/ofrj55j4/20)

Gaurav Tripathi · Accepted Answer · 2017-09-13 10:52:35Z

You can use this css code:

text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

The text-overflow property in CSS deals with situations where text is clipped when it overflows the element's box. It can be clipped (i.e. cut off, hidden), display an ellipsis ('…', Unicode Range Value U+2026).

Note that text-overflow only occurs when the container's overflow property has the value hidden, scroll or auto and white-space: nowrap;.

Text overflow can only happen on block or inline-block level elements, because the element needs to have a width in order to be overflow-ed. The overflow happens in the direction as determined by the direction property or related attributes.

Omid Ahmadyani · Accepted Answer · 2018-09-11 06:10:45Z

the best code for UX and UI is

white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: inherit;

Alexander van Oostenrijk · Accepted Answer · 2021-08-20 11:05:31Z

13

I was able to achieve this by using the webkit-line-clamp and the following css:

div { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

edited Aug 20, 2021 at 11:05

Alexander van Oostenrijk

4,7843 gold badges25 silver badges37 bronze badges

answered Nov 20, 2020 at 11:22

Pini Cheyni

5,5072 gold badges45 silver badges58 bronze badges

3 Comments

Alexander van Oostenrijk Over a year ago

line-clamp doesn't have great support across browsers though: caniuse.com/?search=line-clamp

St. Jan Over a year ago

@AlexandervanOostenrijk Support seems fine now, does this way have any down or upsides compaired to the nowrap-ellipiss option?

Steven Over a year ago

Perfect answer....line-clamp saved my day

Waruna Manjula · Accepted Answer · 2022-08-12 19:21:59Z

I solved it by using:

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

.txt1{width:100px;} .txt2{width:200px;} .mytext{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

<div class="txt1 mytext"> A B C D E F G H I K L M N O P Q R S T V X Y Z </div> <div class="txt2 mytext"> A B C D E F G H I K L M N O P Q R S T V X Y Z </div> <div class="txt3 "> A B C D E F G H I K L M N O P Q R S T V X Y Z </div>

Jaydeep Kataria · Accepted Answer · 2019-11-13 14:07:38Z

width:200px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

Define width also to set overflow in one line

shafii muhudi · Accepted Answer · 2019-05-13 11:50:19Z

if addition please, if you have a long text please you can use this css code bellow;

text-overflow: ellipsis; overflow: visible; white-space: nowrap;

make the whole line text visible.

Isaac Newton · Accepted Answer · 2022-03-23 01:48:35Z

Yea, If you want it to be one line tall, use white-space: nowrap; on the div or list. Whatever you are using it for it should work.

Dekcolnu · Accepted Answer · 2014-06-03 13:41:35Z

-2

I had the same issue and I solved it by using:

display: inline-block;

on the div in question.

edited Jun 3, 2014 at 13:41

answered Jun 3, 2014 at 13:07

Dekcolnu

258 bronze badges

Collectives™ on Stack Overflow

css overflow - only 1 line of text

10 Answers 10

5 Comments

3 Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

5 Comments

3 Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related