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

【问题标题】：CSS text-overflow: ellipsis does not depend on the widthCSS文本溢出：省略号不依赖于宽度
【发布时间】：2014-02-06 20:28:21
【问题描述】：

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

【问题讨论】：

标签： html css truncate ellipsis

【解决方案1】：

您只需将padding-right: 100px; 添加到包含文本的元素即可。

HTML

<p>some text</p>

CSS

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

这是带有上述代码的JsFiddle。

【讨论】：

是的，但问题是我需要使用 text-align: center 并且如果我使用 padding-right 它就不再居中了。
将填充更改为padding: 0 100px; ?

【解决方案2】：

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

所以要回答您的问题，您可以尝试float:right 加边距或使用width: calc(100% - 100px); 和margin-right: 100px

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

【讨论】：

【解决方案3】：

您可以同时使用左右边距：left 和 right 以使其工作：

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/

【讨论】：