CODEWITHSUNDEEP
htmlcsstruncateellipsis
ishwr
ishwr

Reputation: 745

CSS text-overflow: ellipsis does not depend on the width

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.

Upvotes: 2

Views: 6537

Answers (3)

Tarun Kolla
Tarun Kolla

Reputation: 1014

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

Upvotes: 0

skip405
skip405

Reputation: 6279

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/

Upvotes: 0

AfromanJ
AfromanJ

Reputation: 3932

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.

Upvotes: 2

Related Questions