How to trim a text?

Here is my screenshot:

Here is my screenshot:

and this is my following code :

<div style="background:green; width:100px; height:27px;">
This is text to be written here
</div>

My question, how to trim my text if it goes out of the div? I want my text is being trimmed like the second box. Please tell me how to do it.

Answers 1

  • Set the style text-overflow, white-space, overflow property:

    <div style="background: green;height: 27px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100px;">
    This is text to be written here
    </div>


Related Articles