html - crop text too long inside div

Question

<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

Answer 1

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;