文本不换行，导致布局混乱。

Question

我有一组作为行的

元素集合，这些元素的宽度可以随着可调整大小的容器而变化。这些

元素包含了一些文本，我想让文本呈现悬挂式缩进。在这个例子中，当宽度太低时，第一行被向下推到了红色标签的下方，但其他行正常。

当.wrapper 宽度为450px 时，一切都正常显示。当宽度为250px时，你会看到事情是如何破裂的。我希望longtextthatwraps span 和红色标签位于同一行。

这里是一个在线示例/jsfiddle，以下是源代码:

HTML（在 .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;
}

需要帮助，感激不尽

- ryan

---

你能否在问题中加入 excludes CSS 规则？ - taylorc93

@taylorc93，排除规则只控制标签的颜色。 - ryan

Answer 1

嗯，我相信我有一个CSS解决方案可以解决你的问题，虽然我确定还有其他方法可以实现你想要的行为。

对于.prefix，我给出了以下样式：

.prefix {
    display: table-cell;
}

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

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

希望这是你要找的！这里是更新的JSFiddle，展示了它的结果。如果这不是你的目标，请告诉我，我很乐意继续帮助你！

- Serlite

---

这个方案可行，如果有一个仅使用CSS的解决方案，我希望它也能在IE7中运行。 - ryan

Answer 2

如果您删除first类，将span.prefix移出div.parts并为其添加position: absolute，会发生什么情况？

JsFiddle

更新（仅限CSS）

对于仅使用CSS的解决方案，请删除first类，为span.prefix添加position: absolute并指定左侧位置，例如left: 25px。这似乎也适用于IE7。

已更新的JsFiddle

- mutil

---

如果可能的话，我想避免修改HTML，并仅使用CSS来解决它。 - ryan

如果你对于span.prefix的绝对定位没问题，请查看我的更新答案。 - mutil

Answer 3

使用 position:absolute; 和 margin-left。

.first > .prefix{
  position: absolute;
  left:10px;
}

.first > .level-0{
  margin-left:80px;
}

“this fiddle”的第17-24行。

- Adam Simpson

Answer 4

我创建了一个简化版本，它将每个部分浮动到右侧和左侧，并为它们提供了百分比单位。尝试添加您的缩进级别。

<div class="wrapper">
    <div class="left">
       <span class="red">Quisques: </span>
    </div>

    <div class="right">
      <span class="level">consectetur adipiscing  (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      <span class="level">quisque non mauris sed:</span>
      <span class="level">consectetur adipiscing (0000-0000)</span>
  </div>

</div>

CSS

 .wrapper {
  width: 250px;  
  background: #C3DFF5;
  overflow: hidden;
  padding: 12px;
}

.red {
  color: red;
  font-weight: bold;  
}

.left {
  float: left;
  width: 30%;
}

.right {
  float: right;
  width: 70%;
}

.level {
  display: block;
  outline: 1px dotted #FF00FF;
}

现场演示 http://jsbin.com/apaqop/1/

- Ahmad Ajmi

---

我不想要替代的HTML标记，也不想要半吊子的答案，原问题没有得到解决。 - ryan

Answer 5

请查看此 演示。

您需要添加类似于CSS的样式。

 .wrapper {
    width: auto;
    background: #c3dff5;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    min-width:250px;
    float:left;
  }

- krutssss