文本不会换行,而是打破布局

Question

我有一个div的集合作为行,可以是可变宽度,因为它们在可调整大小的容器内.div包含我想要悬挂缩进的文本.这工作正常,但在此示例中,当宽度太低时,第一行被推到红色标签下面.

什么时候.wrapper450px一切正常显示.当它是250px时,你可以看到事情是如何破裂的.我总是希望longtextthatwraps跨度与红色标签位于同一行.

这是一个实例/小提琴,来源如下:

HMTL (两者之间没有空格.prefix,.part但为了便于阅读......):

<div class="wrapper">
  <div class="padded excludes">
    <div class="parts first">
      <span class="prefix">Quisques:&nbsp;</span>
      <span class="segment level-0">
        <span class="part text">longtextthatwraps incorrectly (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
    <div class="parts">
      <span class="segment level-0">
        <span class="part text">consectetur adipiscing  (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
    <div class="parts"> 
      <span class="segment level-0">
        <span class="part text">quisque non mauris sed:</span>
      </span>
    </div>
    <div class="parts"> 
      <span class="segment level-1">
        <span class="part list-item">hendrerit (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
    <div class="parts"> 
      <span class="segment level-1">
        <span class="part list-item">non mauris sed (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
    <div class="parts"> 
      <span class="segment level-1">
        <span class="part list-item">lorem ipsum dolor (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
  </div>
</div>

CSS:

.wrapper {
    width: 250px;
    background: #c3dff5;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}
.padded {
    padding-left: 20px;
}
.parts {
    padding-left: 80px;
}
.parts.first {
    padding-left: 0;
}
.prefix {
    color: #D12;
    font-weight: bold;
    min-width: 80px;
    display: inline-block;
}
.level-0,.level-1 {
    display: inline-block;
    padding-left: 5px;
    text-indent: -5px;
    outline: 1px dotted #f0f;
}
.level-1 {
    padding-left: 20px;
}

帮助赞赏

Answer 1

嗯,我相信我有一个解决你的问题的CSS解决方案,虽然我确信还有其他方法来获得你正在寻找的行为.

因为.prefix,我给了风格:

.prefix {
    display: table-cell;
}

然后我添加了另一个定义:

.parts.first .level-0 {
    display:table-cell;
}

我希望这就是你要找的!这是更新的JSFiddle,向您展示它的结果.如果这不是您的目标,请告诉我,我将很乐意为您提供进一步的帮助!

Answer 2

如果删除该类first，将其移出span.prefix并div.parts添加 a 会怎样position: absolute？

JsFiddle

更新（仅限 CSS）

对于仅 css 的解决方案，请删除该类first，给出position: absolutetospan.prefix并指定左侧位置，例如left: 25px。这似乎也适用于 IE7。

更新了 JsFiddle