css - 如何粘合:after to last word

Question

我有这个代码

.cont {
  width: 150px;
  overflow: hidden;
  resize: both;
  border: solid;
}

.wrap:after {
  content: 'A';
  background: #ccc;
  display: inline;
}

<div class="cont">
  <span class="wrap">
    <span class="inner">
      Hello, my name is Mao
    </span>
    <span class="emptyornot">
    </span>
  </span>
</div>

http://jsfiddle.net/rcsd7L74/

我需要 :after 始终留在 .wrap 中的最后一个词。如果容器太小 - 在最后一个字之前换行。

Answer 1

您拥有的 CSS 可以很好地完成这项工作；您遇到的问题是 HTML 中的换行符折叠成单个空白字符；删除那些并且它有效(导致这个，公认的丑陋的 HTML):

<div class="cont">
    <span class="wrap">
        <span class="inner">
            Hello, my name is Mao</span><span class="emptyornot"></span></span>
</div>

为了让 HTML 稍微漂亮一些(尽管公平地说，发送给客户端的 HTML 无论如何都应该被最小化)，例如:

<div class="cont">
    <span class="wrap">
        <span class="inner">
            Hello, my name is Mao</span>
        <span class="emptyornot"></span>
    </span>
</div>

JS Fiddle demo .

可以使用以下 CSS:

.wrap {
    /* sets the wrapping element's font-size to 0, to hide the collapsed white-spaces: */
    font-size: 0;
}
.inner {
    /* overrides the parent's font-size:
    font-size: 16px;
}
.wrap:after {
    /* as above, to make the text of the pseudo element visible */
    /* no other changes */
    font-size: 16px;
}

JS Fiddle demo .