crop text too long inside div

<div style="display:inline-block;width:100px;">


very long text
</div>

any way to use pure css to cut the text that is too long rather than show on next new line and only show max 100px

html
css

211891 次浏览

小开

最佳答案

<div class="crop">longlong longlong longlong longlong longlong longlong </div>

This is one possible approach i can think of

.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}

This way the long text will still wrap but will not be visible due to overflow set, and by setting line-height same as height we are making sure only one line will ever be displayed.

See demo here and nice overflow property description with interactive examples.

小开

You can use:

overflow:hidden;

to hide the text outside the zone.

Note that it may cut the last letter (so a part of the last letter will still be displayed). A nicer way is to display an ellipsis at the end. You can do it by using text-overflow:

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;

小开

.crop {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:100px;
}

http://jsfiddle.net/hT3YA/

小开

Below code will hide your text with fixed width you decide. but not quite right for responsive designs.

.CropLongTexts {
width: 170px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Update

I have noticed in (mobile) device(s) that the text (mixed) with each other due to (fixed width)... so i have edited the code above to become hidden responsively as follow:

.CropLongTexts {
max-width: 170px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

The (max-width) ensure the text will be hidden responsively whatever the (screen size) and will not mixed with each other.

小开

Why not use relative units?

.cropText {
max-width: 20em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

小开

   .cut_text {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}

<div class="cut_text">


very long text
</div>