CSS make文本换行时：在伪元素太大之前

Question

我试图将文本放在span包装中，因为它的父级太长了。 span具有：具有固定宽度的伪元素。

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

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

我希望将span文本换行，但是对于第一个包含的单词与上面第一行的内联行，就像在这个熟练的模型中所示。

我尝试将white-space: nowrap;添加到父元素，white-space: normal;添加到范围，但它不起作用。

这可以使用CSS吗？

谢谢大家！

感谢任何

Answer 1

首先，您希望元素是内联块，而不是内联，因为您不希望其内容像普通文本一样流动。我用div替换span以保持其语义准确性。那么你希望它占据其父级的50％，就像：之前一样。

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

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

内联块元素的问题在于它们之间保持单个空间，因此即使两个元素为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 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;
}

.parent {
  width: 600px;
  border: 1px solid black;
  white-space: normal;
}

.parent:before {
  content: "Before Pseudo Element";
  display: inline-block;
  width: 50%;
  border: 1px solid green;
  vertical-align: top;
}

.parent div {
  display: inline-block;
  max-width: 50%;
  border: 1px solid blue;
  white-space: normal;
}

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

Answer 2

尝试将white-space属性设置为pre-wrap

Answer 3

我将范围设为display:block;，并将:before和span元素与width:50%;一起展开，还必须将box-sizing更改为border-box帮助增加边框的额外宽度，然后添加一个clearfix。

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

.parent {
  width: 600px;
  border: 1px solid black;
  white-space: normal;
}

.parent:after{
  content:"";
  display:block;
  clear:both;
}

.parent:before {
  content: "Before Pseudo Element";
  display: inline-block;
  width: 50%;
  border: 1px solid green;
  float:left;
}

.parent span {
  display: block;
  border: 1px solid blue;
  white-space: normal;
  float:left;
  width:50%;
}

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

Answer 4

您只能设置：

.parent{
   display: flex;
 }
 .parent:before, .parent span {
    flex: 1;
  }

Answer 5

您可以在该内容中插入新的换行/换行符，使用\ A转义字符并使用CSS 空白：预包装；