1

我有这样的 HTML 元素：

<li class="store-display-item">
    <div class="store-display-item">
        <img class="store-display-image" src="/Images/ToughBook.jpg">
        <p>QuickTrav Carbon Footprint</p>
    </div>
</li>

风格是这样的：

.store-display-item
{
    display: inline;
    width: 100px;
    max-width: 100px;
    word-wrap: break-word;
    margin-right: 10px;
}

.store-display-image
{
    max-width: 100px;
    max-height: 70px;
}

然而<p>QuickTrav Carbon Footprint</p>渲染接近 140 像素，导致我预期的相邻块流到下一行。如何让文本换行并且不超过其容器的最大宽度？

4

4 回答 4

2

试试这个

.store-display-item p {
    width:100px;
    word-wrap:break-word;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

希望它能解决你的问题

于 2012-09-21T07:18:41.370 回答
1

该内联导致它。从内部 div 中删除类，并添加以下内容：

.store-display-item div { width: 100px; }

<li class="store-display-item">
    <div>
        <img class="store-display-image" src="/Images/ToughBook.jpg">
        <p>QuickTrav Carbon Footprint</p>
    </div>
</li>​
于 2012-09-20T20:33:32.160 回答
0

Chris Carew 和 Mani 都是对的。是 display: inline 导致了你的宽度问题（内联元素忽略了 width 属性，如 Pumbaa80 所述）。如果你想保持 li 的内联行为，你的 css 应该是这样的：

.store-display-item
{
    width: 100px;
    max-width: 100px;
    word-wrap: break-word;
    margin-right: 10px;
}

li.store-display-item {
    display: inline-block;        
}

.store-display-image
{
    max-width: 100px;
    max-height: 70px;
}​

显示：内联块；将保持 li 的宽度不变（其计算宽度为 0，显示：内联）。

进一步阅读：

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

于 2012-09-21T07:31:33.560 回答
-2

我认为这是因为您的 html 不正确，您没有以 /> 结束 img 试试这个

<li class="store-display-item">
    <div class="store-display-item">
        <img class="store-display-image" src="/Images/ToughBook.jpg" />
        <p>QuickTrav Carbon Footprint</p>
    </div>
</li>
于 2012-09-20T20:35:08.700 回答