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?

score 465 · Accepted Answer · answered Sep 25 '11 at 15:16

465

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

answered Sep 25 '11 at 15:16

Septnuits

4,804
1
14
7

But then it doesn't show the ellipsis if the text goes beyond the dimension specified. http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts – SearchForKnowledge Oct 13 '14 at 15:59
2

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. – Moshi Sep 29 '16 at 13:18
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. – Eric Mar 24 '17 at 03:36

score 92 · Answer 2 · edited May 23 '17 at 12:02

92

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 '17 at 12:02

Community

1
1

answered Sep 25 '11 at 15:32

Mouli

1,621
15
20

56

I believe you must use `text-overflow: ellipsis;` with `overflow: hidden;` and `white-space: nowrap;` to make it work – Francisco Costa Mar 11 '13 at 12:34
http://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. – DanMan Oct 11 '13 at 10:28
mine just shows in one line and doesn't populate the DIV before showing the ellipsis... http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts (http://jsfiddle.net/ofrj55j4/20/) – SearchForKnowledge Oct 13 '14 at 16:01

Gaurav Tripathi · Answer 3 · 2017-09-13T10:52:35.947

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 · Answer 4 · 2018-09-11T06:10:45.647

18

the best code for UX and UI is

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

edited Sep 11 '18 at 06:10

answered Sep 09 '18 at 13:50

Omid Ahmadyani

1,430
13
15

score 10 · Answer 5 · edited Aug 20 '21 at 11:05

10

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 '21 at 11:05

Alexander van Oostenrijk

4,644
3
23
37

answered Nov 20 '20 at 11:22

Pini Cheyni

5,073
2
40
58

`line-clamp` doesn't have great support across browsers though: https://caniuse.com/?search=line-clamp – Alexander van Oostenrijk Aug 20 '21 at 11:06

score 9 · Answer 6 · answered Nov 13 '19 at 14:07

9

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

Define width also to set overflow in one line

answered Nov 13 '19 at 14:07

Jaydeep Kataria

817
10
22

score 7 · Answer 7 · answered Aug 12 '22 at 19:21

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>

score 1 · Answer 8 · answered May 13 '19 at 11:50

1

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.

answered May 13 '19 at 11:50

shafii muhudi

19
1

score 0 · Answer 9 · answered Mar 23 '22 at 01:48

0

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.

answered Mar 23 '22 at 01:48

Isaac Newton

15
1
2

Dekcolnu · Answer 10 · 2014-06-03T13:41:35.543

-2

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

display: inline-block;

on the div in question.

edited Jun 03 '14 at 13:41

answered Jun 03 '14 at 13:07

Dekcolnu

25
8

css overflow - only 1 line of text

10 Answers10

Linked