Question

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

例如

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

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

我在典型的网格中有这些元素，当你将窗口调整得更小时，最终:after内容（箭头）将转到下一行，这很好。但是，我正试图这样做，所以最后一个词也将包含后内容。我已经尝试了几个答案，我发现类似的问题没有优先权，其中包括：将display: inline-block设置为两个元素，我与white-space和word-wrap属性混淆，没有运气，我我已经尝试将宽度设置为:after规则，但没有优先权。我找到的工作就是在元素本身上设置white-space: nowrap规则，这会阻止:after内容包装，但这并不是我想要的。

有什么建议吗？

Answer 1

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

类似的东西：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这不是你要找的吗？ fiddle

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

只需更改宽度，它就会换成一个单词。

编辑：将jsfiddle和SCSS更新为CSS

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

2 个答案: