Question

当你没有设置宽度时，是否真的可以使用text-overflow: ellipsis？我需要将其设置为右边的100px，而不是宽度。如果文本从右侧到达100px，它将被隐藏并且前面有点。

Answer 1

您只需要将padding-right: 100px;添加到包含文字的元素中。

<强> HTML

<p>some text</p>

<强> CSS

p {
    text-overflow: ellipsis;
    padding-right: 100px;
    white-space: nowrap;
    overflow: hidden;    
}

以上代码为 JsFiddle 。

Answer 2

您可以同时使用两个边距：左侧和右侧以使其正常工作：

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;
}

在线可以看到在线工作示例：http://jsfiddle.net/rqb3W/1/

Answer 3

text-overflow: ellipsis仅在以像素设置width或max-width时有效。您可以使用width: calc (69%)来解决此问题，它会转换为px。

因此，为回答您的问题，您可以尝试使用float:right或将width: calc(100% - 100px);与margin-right: 100px一起使用

引用：https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

CSS文本溢出：省略号不依赖于宽度

3 个答案: