[英]Prevent text from overflowing a padded container in HTML
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上,文本仍然会出现在右边的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.
任何浏览器中的任何解决方案都可以,我只是想知道它是否可行。
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;
}
did you try: 你试过了吗:
word-wrap:break-word;
it automatically breaks word to next line when end is reached. 到达结束时,它会自动将单词分隔到下一行。
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-overflow which have the browser support information also. 以下是参考链接: https : //developer.mozilla.org/En/CSS/Text-overflow ,其中也包含浏览器支持信息。
Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.