Question

我有一个div的集合作为行，可以是可变宽度，因为它们在可调整大小的容器中。 div包含4组我希望并排显示的元素。在这4组中，2组需要是可变宽度而其他2组是固定的。除了最后一组没有按照我想要的方式包装外，我大部分都在工作。由于可变宽度的兄弟，我不能在其上留下边距。我还尝试将每个项目设置为inline-block，但这会强制最后一组具有比可用空间大的奇怪计算宽度，并且总是强制它低于其他3个组。

Here's a live example/fiddle ，来源如下：

HMTL：

<div class="row level-2 note subtype-new subtype-fancy">
    <div class="leading col"><a class="note-icon icon" href="javascript:void(0)"></a></div>
    <div class="padded">
        <div class="status-icon-wrapper col">
          <span class="new-icon icon"></span>
          <span class="modified-icon icon" title="Revised Code"></span>
        </div>
        <div class="codes-wrapper col">
          <span class="codes"><a href="javascript:void(0)" class="code ">XYZ</a></span>
        </div>
        <div class="icon-wrapper col">
          <span class="fancy-icon icon"></span>
          <span class="plain-icon icon"></span>
          <span class="disabled-icon icon"></span>
        </div>
        <div class="description">Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here.</div>
    </div>
</div>

CSS：

.row {margin: 3px 0 3px 2px; overflow: hidden; outline: 1px solid #000}
.col {float: left}
.icon {display: inline-block; height: 16px; width: 16px; line-height: 16px; outline: 1px dotted #0CC; background-color:}
.level-1 .padded {padding-left: 30px}
.level-2 .padded {padding-left: 60px}

.codes-wrapper,
.icon-wrapper {padding-right: 3px}

.status-icon-wrapper,
.icon-wrapper {width: 17px}

.row .icon {display:none}
.note-icon {background-color: #F0F}

.fancy-icon {background-color: #CC0}
.plain-icon {background-color: #C00}
.new-icon {background-color: #0CC}

.note .note-icon,
.subtype-new .new-icon,
.subtype-modified .modified-icon,
.subtype-fancy .fancy-icon,
.subtype-plain .plain-icon,
.subtype-disabled .disabled-icon
{display: inline-block}

Answer 1

.description {
    overflow:hidden;
}

jsFiddled here

http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow

隐藏：此值表示内容已裁剪 ...

Answer 2

如果我正确理解了这个问题，你应该添加：

.description{
    overflow:hidden;
}

到你的CSS

文本本身并没有包装

2 个答案: