CSS 空白 nowrap 不会增加宽度？
我正在使用 div 和 jquery 重建一个类似于
现在我几乎得到了我想要的，对容器内的每个项目使用 white-space:nowrap ，这样项目的文本就不会继续。在新的一行上，使用的问题是文本从盒子中流出，而不是让盒子沿着文本增长，我已经尝试过文本溢出：省略号 但这似乎只是隐藏了溢出的文本并在末尾添加了三个点 (...)
所以简而言之，这是我的问题：如何让 div 与其内部的文本一起增长。 ，当对其应用 white-space:nowrap 时，我不想使用 overflow:hidden 隐藏文本，而不是让文本流出它，我想显示整个字符串..
提前致谢！
I am reconstructing a dropdown menu similar to a <select> box using div's and jquery. The div containing the dropdown items should have a minimum width, but no maximum width as it should grow along with the widest item in the list (so if i have very long item like '[This is the longest item within the container]', the whole container should be as wide as this entry.
Now I almost got what I want, using white-space:nowrap for each item within the container, so that the text of an item won't continue on a new line. The problem using is the text flows out of the box using, instead of letting the box grow along the text. I can't figure out how to fix this problem. I already tried text-overflow:ellipsis but that appears to just hide the overflown text and adding three dots (...) at the end.
So here is my problem in a nutshell: how can I let a div grow along with the text inside of it, when white-space:nowrap is applied on it, instead of letting the text flow out of it? I don't want to hide the text using overflow:hidden, I want to show the entire string..
Thanks in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
块元素的宽度不取决于其在普通 CSS 静态布局模型中的内容。您可以将“收缩以适合”行为作为其他布局属性的一部分：
float: leftposition:absolutedisplay: inline-block假设没有设置显式
宽度的Block elements' widths don't depend on their content in the normal CSS static layout model. You can get ‘shrink-to-fit’ behaviour as part of other layout properties:
float: leftposition: absolutedisplay: inline-blockassuming no explicit
widthis set.select 的任何父元素中是否设置了最大宽度？
这将阻止空白属性工作。 display: table 确实会覆盖 max-width（如果已设置）。
Is there a max-width set in any of the select's parent elements?
This would stop the white-space property from working. display: table does override a max-width if one is set however.
我遇到了类似的问题，通过指定 px 而不是百分比的填充值解决了这个问题。
I had a similiar problem, it was solved by specifying the padding value in px instead of percentage.