防止文本在HTML中溢出填充的容器 [英] Prevent text from overflowing a padded container in HTML

问题描述

我遇到这种情况：

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

如果我在div上设置overflow：hidden，文本仍然会超出15px padded右：

If I set overflow: hidden on the div the text will still go outside the 15px padded area on the right:

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

这可以不用在文本中放置额外的元素。任何浏览器中的任何解决方案都会做，我只想知道是否可能。

Can this be done without putting an extra element inside to hold the text. Any solution in any browser will do, I just want to know if it's possible.

推荐答案

您可以使用透明边框您想要的保证金。它不会溢出：

You can use a transparent border to make the margin you want. It won't be overflowed:

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

这篇关于防止文本在HTML中溢出填充的容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！