防止文本溢出 HTML 中的填充容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7711490/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent text from overflowing a padded container in HTML
提问by disc0dancer
I have this situation:
我有这种情况：
<div style="width: 100px; padding: 5px 15px 5px">Some text longer than 100px</div>
If I set overflow: hidden on the div the text will still go outside the 15px padded area on the right:
如果我在 div 上设置了 overflow: hidden 文本仍然会超出右侧的 15px 填充区域：
++----------------------------+------+
++----------------------------+------+
||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.
这是否可以在不放入额外元素来保存文本的情况下完成。任何浏览器中的任何解决方案都可以，我只是想知道是否可能。
回答by Jokesterfr
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;
}
回答by helloworld
did you try:
你试过了吗：
word-wrap:break-word;
it automatically breaks word to next line when end is reached.
当到达结束时，它会自动将单词换行到下一行。
回答by Logesh Paul
Hey I don't know about your requirement exactly, there is one way to truncate the text using css3 ellipsis property.
嘿，我不完全了解您的要求，有一种方法可以使用 css3 省略号属性截断文本。
Example
例子
a) Normal case
a) 正常情况
+-------------------------++
some text which is exceeding the container
+-------------------------++
b) After implementing ellipsis
b) 实施省略号后
+-------------------------++
some text which is exceed...
+-------------------------++
Here is the reference link: https://developer.mozilla.org/En/CSS/Text-overflowwhich have the browser support information also.
这是参考链接：https: //developer.mozilla.org/En/CSS/Text-overflow也有浏览器支持信息。
Hope this helps!
希望这可以帮助！
