Question

通常当文字内容大于它的容器时，它会在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？

Answer 1

尝试一下，看看它是否适合你：

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

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

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

不利的一面是它没有分别获得每个p宽度，而只是最长的p宽度。

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

Answer 2

您可以使用CSS overflow-x：visible / scroll

进行尝试

自动调整div的宽度，固定高度为其内容

2 个答案: