强制CSS三角形内的文本保持在一行

Question

我正在玩div中的三角形，并希望将文本放在该三角形内。到目前为止，一切都按预期工作 - 唯一的问题是文本在空间变形 - 如果它们之间没有空格，那么它们都适合：

<div style="position:absolute;z-index: 1;width: 0;height: 0;border-style: solid;border-width: 125px 125px 0 0;border-color: #1abc9c transparent transparent transparent;">
  <div style="top: -100px; left: 10px; right:0px; position:absolute;">
    <p>11 one</p>
  </div>
</div>

我试过制作1px的文本但它仍然会变形，所以显然不是缺少空间问题。有什么想法是什么问题？

Answer 1

为什么会这样？

首先，让我们通过分离CSS来清理HTML。

HTML

<div class="outerParent">
  <div class="innerParent">
    <p>11 one</p>
  </div>
</div>

CSS

.outerParent {
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 125px 125px 0 0;
  border-color: #1abc9c transparent transparent transparent;
}
.innerParent {
  top: -100px;
  left: 10px;
  right: 0px;
  position: absolute;
}

更好！现在，我们首先看到.outerParent有width: 0。这意味着它的孩子.innerParent没有宽度。当文本到达其容器的边缘时（由于width: 0上的.outerParent而立即发生），它将包装任何空格，这由white-space property控制：

  

white-space CSS属性用于描述如何处理元素内的空格。

如何防止这种情况发生？

默认的空格值是“正常”，这将包装。使用white-space属性并将其设置为“nowrap”：

white-space: nowrap;

另一种选择是强制段落元素通过给它一个宽度推到它的父节点之外：

width: 50px;

工作示例

.outerParent {
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 125px 125px 0 0;
  border-color: #1abc9c transparent transparent transparent;
}
.innerParent {
  top: -100px;
  left: 10px;
  right: 0px;
  position: absolute;
}

p {
  white-space: nowrap;
}

<div class="outerParent">
  <div class="innerParent">
    <p>11 one</p>
  </div>
</div>