web-dev-qa-db-ja.com

テキストオーバーフローCSSの切り捨て

以前はJSを使用して動的に実行していましたが、いくつかのパフォーマンスの問題が発生していました。そのため、代替オプションを用意する必要があります。

現在、テキストオーバーフロースタイルを使用して、タブ名の長いテキストを切り捨てています。

しかし、誰かがそれを解決できる場合、小さな問題があります

現在、これは私のテキストの切り捨てがどのように見えるかです

このテキストは切り捨てられました...

ここでは、3つのドット（...）が黒で表示されていますが、これを赤に変更します。

これを達成する方法はありますか？

csstexttruncatecss3
30
nipiv

ここで動作します：

コード（HTMLおよびCSS）：

<div class="overme">
    how much wood can a woodchuck chuck if a woodchuck could chuck wood?
</div>

CSS：

.overme {
    width: 300px;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: Ellipsis;
    color: red;
}

末尾のドット/省略記号は、その基本的なCSSを使用して赤で色付けされています。

81
user1386320

ドットを赤で表示したいだけだと思いますか？残念ながら、これは単純なcssでは不可能です。しかし、カスタムEllipsisスタイルの作成を管理するチュートリアルが見つかりました。これは必要な場合にのみ表示されます。

https://www.mobify.com/dev/multiline-Ellipsis-in-pure-css/

これは非常に素晴らしいハックであり、言葉で説明するのは簡単ではありません。たぶん私が作ったこのjsfiddleはあなたを助けることができます：

http://jsfiddle.net/MyUQJ/9/

overflow: hidden;の.wrapを削除して、何が起こっているのかを確認してください。主なアイデアは、.end divは、テキストがオーバーフローしているときは.left-sideの左下に移動し、オーバーフローしていないときは.textの右下に移動することです。次に、.Ellipsis divは相対.end内に絶対位置で配置されるため、右に配置すると、テキストがオーバーフローしているときに表示され、テキストがオーバーフローしていないときにオーバーフローします。おかしいですね。

とにかく、ここに生のコードがあります：

HTML：

<div class="wrap">
    <div class="left-side"></div>
    <div class="text">
        This is a short story, it 
        doesn't need to be ellipsed.
    </div>
    <div class="end">
        end
        <div class="Ellipsis">...</div>
    </div>
</div>

<br>
<br>
<br>
<br>

<div class="wrap">
    <div class="left-side"></div>
    <div class="text">
        This is a long story. You won't be able to 
        read the end of this story because it will 
        be to long for the box I'm in. The story is 
        not too interesting though so it's good you 
        don't waste your time on this.
    </div>
    <div class="end">
        end
        <div class="Ellipsis">...</div>
    </div>
</div>

CSS：

.wrap {
    height: 100px;
    width: 234px;
    border: solid 1px #000;
    overflow: hidden;
}

.left-side {
    float: left;
    width: 32px;
    height: 100px;
    background: #F00;
}

.text {
    float: right;
    border: solid 1px #0F0;
    width: 200px;
}

.end {
    position: relative;
    float: right;
    width: 30px;
    border: solid 1px #00F;
}

.Ellipsis {
    position: absolute;
    top: -25px;
    left: 198px;
    background: white;
    font-weight: bold;
    color: #F0F;
}

もちろん、これを実装するときは、すべての境界線と「終了」テキストを削除する必要があります。これはわかりやすい例になりました。また、おそらくラップにposition: absolute;を与えてからmargin-left: -32pxを与えたいと思うでしょう。ここで、幅は.left-sideの幅なので、テキストの左側にマージンがありません側。

がんばろう！

2
gitaarik