自动调整具有固定高度的 div 的宽度以适应其内容答案

【问题标题】：Automatically adjust width of div with fixed height to it's content自动调整具有固定高度的 div 的宽度以适应其内容
【发布时间】：2015-04-07 11:47:02
【问题描述】：

通常当文本内容大于其容器时，它会在 Y 方向/垂直方向上溢出：

-----------------------
|Hello hello hello hel|
|lo hello hello hello |
|hello hello hello hel|
-----------------------
 lo hello hello hello 
 hello hello

但是在这种情况下，我希望它在 X 方向/水平方向上自动溢出，同时保留和填充 div 的固定高度。（宽度应该相应调整，它可以显示一个水平滚动条，或者它应该只是水平溢出容器。）

-----------------------
|Hello hello hello hel|lo hello hello
|lo hello hello hello | hello hello h
|hello hello hello hel|lo hello
-----------------------

这可以通过 CSS(3)/flexbox/overflow/text-wrapping 实现吗？或者如果没有，使用 JavaScript？

【问题讨论】：

我没想到，你不能用宽度为 150% 的文本容器来实现吗？
问题是文本的数量是可变的，所以像 150% 这样的固定是不够的。
您要完全限制文本吗？比如说受身体宽度的限制？还是您希望它无限期地“持续”下去？
它就像 white-space: nowrap，但是它应该根据我上面试图说明的 div 的高度进行换行

标签： html css overflow flexbox fluid-layout

【解决方案1】：

你可以试试 CSS overflow-x: visible/scroll

【讨论】：

【解决方案2】：

试试这个，看看它是否适合你：

  jQuery(document).ready(function($) {
    $(".container p").each(function() {
        var pwidth = $(this).width();
         $(this).width(pwidth)

        }),
     $('.container').css({"width" : "300px" }) 
});

试试这个。此脚本在其父元素宽度设置为 auto 时获取最长的段落宽度（注意初始 css 值）完成后将容器设置为 300px（或任何你希望它在最后）。

不利的一面是它不会单独获取每个 p 宽度，而只会获取最长的一个。

http://jsfiddle.net/5vfm8o86/3/

【讨论】：