html - 文本不换行，而是破坏布局

Question

我有一组 div 作为行，它们可以是可变宽度的，因为它们位于可调整大小的容器内。 div 包含我想要悬挂缩进的文本。这工作正常，除了在这个例子中当宽度太低时第一行被推到红色标签下面。

当 .wrapper 为 450px 时，一切都会正确显示。当它为 250px 时，您可以看到事情是如何破裂的。我总是希望 longtextthatwraps 跨度与红色标签在同一行。

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

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;
}

希望这就是您要找的!这是 updated JSFiddle向您展示它的结果。如果这不是您的目标，请告诉我，我们很乐意为您提供进一步的帮助!