crop text too long inside div
HtmlCssHtml Problem Overview
<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 Solutions
Solution 1 - Html
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;
Solution 2 - Html
<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.
Solution 3 - Html
.crop {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:100px;
}
Solution 4 - Html
Why not use relative units?
.cropText {
max-width: 20em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Solution 5 - Html
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.
Solution 6 - Html
.cut_text {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="cut_text">
very long text
</div>