如果内容之后的元素需要换行，则强制自动换行

Question

我发现了一些可以解决此问题的问题，但并不是我真正需要的。我有一些文字，

once-weekly dosing regimen 例如。在这个元素上，有一个 after css 规则，例如：

font-family: FontAwesome;
content: " \f105";
color: #00467f;

我将这些元素放在一个典型的网格中，当您将 window 的大小调整得更小时，最终 :after 内容（箭头）将转到下一行，这很好。但是，我正在努力使最后一个词也包含在后面的内容中。我已经尝试了几个我发现的类似问题的答案，但没有成功，其中包括：将 display: inline-block 设置为两个元素，我弄乱了 white-space 和 word-wrap 属性但没有运气，我我也尝试过为 :after 规则设置宽度，但没有成功。我确实发现某种工作是在元素本身上设置 white-space: nowrap 规则，这会阻止 :after 内容换行，但这并不是我想要的。

有什么建议吗？

Answer 1

您必须将最后一个单词包装在一个单独的元素中（可能带有伪元素）。您不能强制在溢出时中断原始文本。

类似于：

span {
  white-space: nowrap;
}

span::after {
  font-family: FontAwesome;
  content: " \f105";
  color: #00467f;
  vertical-align: middle;
}

div {
  padding: .25rem;
  font-size: 2rem;
  width: 50%;
  margin: 2em auto;
  border: 1px solid grey;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  once-weekly dosing <span>regimen</span>
</div>

Answer 2

这不是你要找的吗？ fiddle

div {
    width: 40px;
    background: yellow;
}
.breaked {
    word-break: break-word
}
.text:after {
    content: 'After';
    color: blue;
}

只需简单地改变宽度，它就会换行成一个字。

编辑：将 jsfiddle 和 SCSS 更新为 CSS

如果内容之后的元素需要换行，则强制自动换行

Force word wrap if elements after content needs to be wrapped

css

word-wrap