CODEWITHSUNDEEP
htmlcss
disc0dancer
disc0dancer

Reputation: 9365

Prevent text from overflowing a padded container in HTML

I have this situation:

<div style="width: 100px; padding: 5px 15px 5px">Some text longer than 100px</div>

If I set overflow: hidden on the div the text will still go outside the 15px padded area on the right:

++----------------------------+------+
++----------------------------+------+
||This text should stop here -| but i|
++----------------------------+------+
++----------------------------+------+

Can this be done without putting an extra element inside to hold the text. Any solution in any browser will do, I just want to know if it's possible.

Upvotes: 21

Views: 48513

Answers (2)

Jokesterfr
Jokesterfr

Reputation: 501

You can use a transparent border to make the margin you want. It won't be overflowed:

div {
    white-space: nowrap;
    overflow: hidden;
    max-width: 300px;
    border-left:1em solid transparent;
    border-right:1em solid transparent;
    text-overflow: ellipsis;
}

Upvotes: 39

Logesh Paul
Logesh Paul

Reputation: 7700

Hey I don't know about your requirement exactly, there is one way to truncate the text using css3 ellipsis property.

Example

a) Normal case

+-------------------------++
some text which is exceeding the container
+-------------------------++

b) After implementing ellipsis

+-------------------------++
some text which is exceed...
+-------------------------++

Here is the reference link: https://developer.mozilla.org/En/CSS/Text-overflow which have the browser support information also.

Hope this helps!

Upvotes: 0

Related Questions