防止文本扩展收缩包装的 div答案

【问题标题】：Prevent text from expanding shrink wrapped div防止文本扩展收缩包装的 div
【发布时间】：2017-05-18 17:04:25
【问题描述】：

我有一个支架 div，它收缩包裹在其他几个 div 周围，因此支架没有固定宽度。支架内部还有另一个包含文本的 div。当文本过多时，它会扩展支架，因此不再收缩包装。这是我的问题的演示，http://jsfiddle.net/WSbAt/。这是一个照片库页面。

我认为如果不设置支架的宽度可能没有办法，因为每行的图像数量是动态的，所以我不能这样做。我可能可以用 jQuery 解决这个问题，但希望有一个 css 解决方案。

编辑：我试图不指定任何宽度，因为每行的缩略图数量取决于您的窗口大小。

演示：http://jsfiddle.net/WSbAt/

CSS：

#container
{
    width:600px; /*only set for demo. will be random on live page*/
    border:1px solid black;
    text-align:center;
}
#holder
{
    display: inline-block;
    border:2px solid blue;
}
.thumbnail
{
    float:left;
    width:100px;
    height:100px;
    background-color:red;
    margin-right:10px;
    margin-bottom:10px;
}
.expandedHolder
{
    padding:10px;
    border:2px solid yellow;
    margin-bottom:10px;
    margin-right:10px;
}
.fullImage
{
    float:left;
    width:250px;/*only set for demo. will be random on live page*/
    height:200px;
    background-color:green;
}
.text
{
    float:left;
    margin-left:10px;
}

HTML：

<div id="container">
    <div id="holder">
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div style="clear:both;"></div>
        <div class="expandedHolder">
            <div class="fullImage"></div>
            <div class="text">some text here. some text here. some text here. </div>
            <div style="clear:both;"></div>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

【问题讨论】：

使用 CSS 最大宽度属性？
还是 CSS 溢出：隐藏属性？
我不知道最大宽度是多少，这取决于每行有多少缩略图。
溢出怎么办：隐藏？
我会在哪个类上使用溢出？

标签： css html width

【解决方案1】：

使用百分比作为 .fullImage 和 .text 的宽度

        .fullImage
        {
            float:left;
            width:70%;
            height:200px;
            background-color:green;
        }
        .text
        {
            width: auto;
            float:left;
            width:20%;
            margin-left:10px;
        }

然后如果文本变得很大使用text-overflow

text-overflow:ellipsis;

或overflow

overflow:hidden;

http://jsfiddle.net/RubenJonker/WSbAt/5/

【讨论】：

有没有不指定宽度的方法？我希望将 fullImage 的高度设置为 200px，但我希望将宽度设置为 auto，因为图像的纵横比不会相同。抱歉，我没有在我的代码中解释。

【解决方案2】：

我正在尝试用纯 CSS 做同样的事情。我发现了一种适用于 Chrome 的 hacky 方式（我还没有检查其他浏览器）。

#container {
    display: table-caption; /* Shrink the container */
    border:1px solid black;
    text-align:center;
}

【讨论】：

【解决方案3】：

我使用 jQuery 来计算文本的宽度。如果有人好奇，这就是你将如何修复我的示例。

var textDiv = $(".text");
textDiv.hide();//hide the text to get holder width without text

var holderWidth = $("#holder").width();
var imageWidth = $(".fullImage").width();
var textWidth = (holderWidth - imageWidth) - 45;

textDiv.css("width", textWidth + "px");
textDiv.show();

【讨论】：