1

CSS を使用して、長いテキストに省略記号を表示しようとしています。これは、テキストにスペースが含まれていない場合は正常に機能するように見えるため、改行 (つまり、単語の折り返し) はできませんが、スペースが含まれている場合、省略記号は表示されません。

私のコードはそうです：

<!DOCTYPE html>
<html>
    <head>
        <style>
span {
    width: 150px;
    display: inline-block;
    border: 1px dotted blue;
    height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px;
}       
        </style>
    </head>
    <body>
        <div>
            <span>
            This is some long text that I want to have an ellipsis on.
            </span>
        </div>
        <div>
            <span>
            afejaklfjefklafjeklfjeklfjeklfejfklejfkfjeklfjeklfejfklaejfeklfejfklejfklfejfkl
            </span>
        </div>
    <body>
</html>

これが私のフィドルです。

4

1 に答える 1

4

white-space:nowrap省略記号を追加すると、画像が表示されます。理由は、スペースがある場合はスペースを含むテキストが折り返され、省略記号が必要ないためです。を削除するoverflow-hiddenと、テキストが折り返されて表示されます。

span {
    width: 150px;
    display: inline-block;
    border: 1px dotted blue;
    height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px;
    white-space: nowrap;
}

ドキュメントから

text-overflow 宣言を使用すると、クリップされたテキスト、つまりボックスに収まらないテキストを処理できます。text-overflow が機能するのは、次の場合のみです: ボックスに可視以外のオーバーフローがある (overflow: visible の場合、テキストは単にボックスから流れ出る) ボックスに空白がある: nowrap または、テキストの配置方法を制約する同様の方法アウト。(これがないと、テキストは次の行に折り返されます)

于 2013-05-28T01:52:11.820 に答える