21

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.

5
  • Well,don't use any width, and make the position:absolute Like this <div style="position:absolute; padding: 5px 15px 5px">Some text longer than 100px</div>
    – Max Allan
    Oct 10, 2011 at 10:40
  • Maybe you could use the rarely-used clip css property: reference.sitepoint.com/css/clip Or simply use margin-right: 15px instead of the padding, if possible.
    – biziclop
    Oct 10, 2011 at 10:42
  • 1
    Or you could cover the padding part with an appropriate :after{} rule.
    – biziclop
    Oct 10, 2011 at 10:47
  • 4
    Why not just add an extra element? That said: jsfiddle.net/thirtydot/djDWF
    – thirtydot
    Oct 10, 2011 at 10:50
  • it will be easier if you put the text inside p tag Oct 10, 2011 at 10:55

2 Answers 2

39

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;
}
3
  • 3
    Thank you @Jokesterfr. Using transparent border instead of padding did the trick. Even for multi-line text. Thank you! jsbin.com/kisoti/edit?html,css,output
    – Stoutie
    Jul 15, 2014 at 21:03
  • overflow: hidden; and text-overflow: ellipsis worked for me!
    – Sam Munroe
    Jun 2, 2016 at 16:12
  • transparent borders show up if you use a background image and box-sizing: border-box
    – Isaac Pak
    Jun 30, 2017 at 14:13
0

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!

1
  • 6
    This doesn't solve the question at all. He knows how to truncate the text; his problem is that the truncated string overflows the padding and only gets cut off at the edge of the box. He wants it to be truncated at the edge of the padded area.
    – Spudley
    Oct 10, 2011 at 13:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.