css - 强制 CSS 三 Angular 形内的文本保持一行

Question

我在 div 内摆弄一个三 Angular 形，想在该三 Angular 形内放置文本。到目前为止，一切都按预期工作 - 唯一的问题是文本在空间上扭曲 - 如果单词之间没有空格，它就完全适合:

<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。这意味着它的 child .innerParent 没有宽度。当文本到达其容器的边缘时(由于 .outerParent 上的 width: 0 而立即发生)，它将包装所有空白，这由 white-space property 控制:

The white-space CSS property is used to to describe how white spaces inside the element is handled.

如何防止这种情况发生？

默认的空白值是“normal”，这会换行。使用 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>