相关疑难解决方法(0)

全高度内容,尽可能小的宽度

我永远不会认为这是可能的,但这里有很多聪明人,所以我想我会问.我正在寻找一种方法来拥有一个全高容器,其宽度取决于有多少内容.我希望文本填充占据整个高度的区域,同时使用尽可能小的宽度.高度是已知的并且是硬编码的,内容的数量不是.

我正在使用这样的东西:

<div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    when an unknown printer took a galley of type and scrambled....</p>
</div>
Run Code Online (Sandbox Code Playgroud)
div {
    background:red url(http://lorempixel.com/600/400/);
    float:left;
    width:600px;
    height:400px;
}
p {
    background:#fff;
    padding:20px;
    margin:20px;
}
Run Code Online (Sandbox Code Playgroud)

通常内容从上到下填充页面:

在此输入图像描述

我正在寻找的是相反的,从左到右填写:

在此输入图像描述

内容较少,应该如下所示:

在此输入图像描述

使用完整的硬编码高度width:auto会产生这种效果:

在此输入图像描述

有没有办法让文本以尽可能小的宽度填充高度,而无需硬编码宽度或文本溢出?这似乎是不可能的,我不知道如何处理它.Javascript/jQuery解决方案欢迎.

html javascript css jquery

8
推荐指数
1
解决办法
189
查看次数

标签 统计

css ×1

html ×1

javascript ×1

jquery ×1