Is it actually possible to use text-overflow: ellipsis, when you don't set the width? Instead of width I need to set it until 100px from the right. If the text reaches 100px from the right, it will be hidden and with dots in the front.
Add a comment |
3 Answers
You should just have to add padding-right: 100px; to the element with text in.
HTML
<p>some text</p> CSS
p { text-overflow: ellipsis; padding-right: 100px; white-space: nowrap; overflow: hidden; } Here is a JsFiddle with the above code.
You can use both margins: left and right to make it work:
HTML: <div class="parent"> <div class="test">some pseudo-centered text some pseudo-centered text some pseudo-centered text some pseudo-centered text some pseudo-centered text</div> </div> CSS: .test { text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: 0 100px; } A working example online can be seen here: http://jsfiddle.net/rqb3W/1/
Comments
text-overflow: ellipsis only works if width or max-width is set in pixels. You can get around this by using width: calc (69%) which gets converted to px.
So to answer your question you can try float:right with a margin or use width: calc(100% - 100px); with margin-right: 100px
Refer: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
