Question

我遇到这种情况：

<div style="width: 100px; padding: 5px 15px 5px">Some text longer than 100px</div>

如果我设置溢出：隐藏在div上，文本仍然会出现在右边的15px填充区域之外：

++----------------------------+------+
++----------------------------+------+
||This text should stop here -| but i|
++----------------------------+------+
++----------------------------+------+

这可以在不添加额外元素来保存文本的情况下完成。任何浏览器中的任何解决方案都可以，我只想知道它是否可行。

Answer 1

您可以使用透明边框来制作所需的边距。它不会溢出：

div {
    white-space: nowrap;
    overflow: hidden;
    max-width: 300px;
    border-left:1em solid transparent;
    border-right:1em solid transparent;
    text-overflow: ellipsis;
}

Answer 2

你试过了吗？

word-wrap:break-word;

当到达目的地时，它会自动将单词分隔到下一行。

Answer 3

嘿我完全不了解您的要求，有一种方法可以使用css3省略号属性截断文本。

示例

a）正常情况

+-------------------------++
some text which is exceeding the container
+-------------------------++

b）实施省略号后

+-------------------------++
some text which is exceed...
+-------------------------++

以下是参考链接：https://developer.mozilla.org/En/CSS/Text-overflow，其中也包含浏览器支持信息。

希望这有帮助！

防止文本溢出HTML中的填充容器

3 个答案: