为什么固定表格布局 td 单词不换行?
我有一个表格,其中填充了不同长度的文本。我已将表格布局 css 属性设置为固定,因为它不断将表格推到其父级之外,从而创建水平滚动条。
我希望我的 td 恰好是表格的一半,即其父表格的完整大小。我希望我的文本包含在 td 内。它看起来像这样:
我希望文本环绕 20,这样它就不会与其他文本重叠。我无法使用
。
这是问题的JSFiddle。
I have a table that is being populated with different lengths of text. I have set the table-layout css property to fixed because it keeps pushing the table outside it's parent creating a horizontal scrollbar.
I want my td's to be exactly half of the table which will be full size of it's parent. I want my text to wrap inside the td's. Here is what it looks like:
I want the text to wrap around 20 so it doesn't overlap the other text. I can't use a <br />
.
Here is a JSFiddle of the problem.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您可以在
p
上使用word-wrap:break-word
。它可以在您的 jsFiddle 中运行,并且与 Microsoft 开发的 IE 兼容。You could use
word-wrap: break-word
on thep
. It worked in your jsFiddle, and it's compatible with IE as Microsoft developed it.它没有中断的原因是字符串中没有空格。一旦你在这组数字中添加一个空格,它就会中断。因此,解决此问题的一种方法是将
word-wrap:break-work
分配给p
选择器。The reason that it is not breaking is because there is no spaces in the string. As soon as you add a space to the set of numbers it breaks. Therefore, one way to fix that would be to assign
word-wrap:break-work
to thep
selector.当您将容器宽度设置较小时,请尝试增加容器宽度,检查 JSFiddle 演示,宽度 250 将突破到精确的 20 位置。
as you are setting container width smaller, try to increase container width, Check JSFiddle for demo, width 250 will break to the exact 20 position.