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

<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.

Answer 2

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). There is no pure-CSS way to cut the text letter-by-letter.