不用换行的标签，怎么伪元素实现换行的效果？

要让一个本身不换行的标签（例如 <span>，<a>，<strong> 等）中的文本换行，同时利用伪元素，你可以使用以下几种方法：

1. display: inline-block; 结合 word-wrap 或 overflow-wrap:

   这是最常用的方法。将元素的 display 属性设置为 inline-block，使其既能像内联元素一样排列，又能像块级元素一样设置宽度和高度等属性。然后，使用 word-wrap 或 overflow-wrap 属性来控制换行。

   span {
     display: inline-block;
     width: 100px; /* 设置一个宽度限制 */
     word-wrap: break-word; /* 或 overflow-wrap: break-word; */
   }
   

   • word-wrap: break-word; 和 overflow-wrap: break-word; 效果相同，都是允许单词在非换行符处换行。overflow-wrap 是 word-wrap 的新名称，兼容性更好。

2. white-space: normal; (如果父元素设置了 white-space: nowrap;):

   如果父元素设置了 white-space: nowrap; 来阻止其子元素内的文本换行，你可以在需要换行的子元素上设置 white-space: normal; 来恢复默认的换行行为。

   .parent {
     white-space: nowrap;
   }
   
   .parent span {
     white-space: normal;
   }
   

3. 利用伪元素添加 br 标签 (不推荐):

   虽然技术上可行，但不推荐使用伪元素添加 br 标签来实现换行。这种方法难以维护，并且可能会导致布局问题。 最好使用 CSS 属性来控制换行，而不是通过添加 HTML 元素。

   span::after {
     content: "\A"; /* Unicode 换行符 */
     white-space: pre; /* 保留换行符 */
   }
   

   或者

   span::before {
      content: '';
      display: block; /* 强制换行 */
   }
   
   

   这种方法的问题在于它实际上是插入了一个换行符，而不是根据容器宽度自动换行.

最佳实践:

通常情况下，使用 display: inline-block; 结合 word-wrap: break-word; 或 overflow-wrap: break-word; 是实现不换行标签换行的最佳方法。它简洁、易于理解，并且具有良好的浏览器兼容性。 记得根据需要设置宽度或者 max-width 来控制换行的时机。

示例:

<div style="width: 200px;">
  <span style="display: inline-block; word-wrap: break-word; width: 100%;">这是一段很长的文字，需要在200px的宽度内换行。</span>
</div>

选择哪种方法取决于你的具体需求和上下文。 如果只是简单的需要在一个限定宽度内换行，第一种方法通常是最合适的。 如果是需要覆盖父元素的 white-space: nowrap; 样式，则应该使用第二种方法。 尽量避免使用第三种方法。