Reputation: 20745

css overflow - only 1 line of text

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?

Upvotes: 206

Answers (10)

Waruna Manjula

Reputation: 3477

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>

Upvotes: 13

Isaac Newton

Reputation: 15

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.

Upvotes: 0

Pini Cheyni

Reputation: 5437

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

Upvotes: 12

Jaydeep Kataria

Reputation: 867

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

Define width also to set overflow in one line

Upvotes: 10

shafii muhudi

Reputation: 19

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.

Upvotes: 1

Omid Ahmadyani

Reputation: 1450

the best code for UX and UI is

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

Upvotes: 19

Gaurav Tripathi

Reputation: 1355

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.

Upvotes: 79