CSS 在 :before 伪元素太大时使文本换行

Question

当文本对于其父级而言太长时，我试图将文本置于跨度换行中。跨度有一个 :before 具有固定宽度的伪元素。

问题是，当我添加white-space: normal到父元素时，span 文本会自动换行到下一行，但它一直到父元素的左侧......很难用文字来解释，所以这里有一个 JSFiddle：

https://jsfiddle.net/cpkzwzko/1/

我希望 span 文本可以换行，但第一个换行的单词要与上一行的第一个单词内联，如这个巧妙的模型所示。

我试过添加white-space: nowrap;到父元素和white-space: normal;跨度，但它不起作用。

这可以使用 CSS 吗？

谢谢大家！

感谢任何

Answer 1

首先，您希望元素是内联块，而不是内联，因为您不希望其内容像普通文本一样流动。我会用 div 替换 span 以保持语义准确。然后您希望它占用其父项的 50%，就像 :before 一样。

50% + 50% + 几个像素的边框太大而无法放入父元素，因此第二个内联块将被环绕。为了防止这种情况，请使用 border-box 使 css 宽度属性包括边框和填充。这段代码将把它应用于站点上的所有元素，这是许多现代站点所做的，因为它使 CSS 变得更加简单。

*, *:before, *:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}

inline-block 元素的问题在于它们之间保留了一个空格，因此即使两个元素占 50%，它们之间也会存在一个空格。为了防止这种情况...您必须删除 HTML 代码中的空格。

<div class="parent"><div>
  This is a string which is too long to fit in the parent next to it's :before pseudo selector
</div></div>

所以不要在父 div 和子 div 之间放置换行符或任何空格。很遗憾，但我们无能为力。除此之外，这也有效：

<div class="parent"><!--
  --><div>
    This is a string which is too long to fit in the parent next to it's :before pseudo selector
  </div><!--
--></div>

但它非常丑陋。

现在，您还需要在元素上进行垂直对齐，以便它们与顶部对齐而不是基线对齐。

瞧：

*, *:before, *:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}

<div class="parent"><div>
  This is a string which is too long to fit in the parent next to it's :before pseudo selector
</div></div>