Question

我有这段代码

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

.cont { width: 150px }

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

http://jsfiddle.net/rcsd7L74/

我需要：之后始终使用 .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

Answer 2

更改宽度：

.cont { width: 160px }

如何粘合：后到最后一个字

2 个答案: