51

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

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

しかし、誰かがそれを解決できるなら、私は小さな問題を抱えています

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

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

ここでは、3つのドット（...）が黒色になっているので、赤色に変更します。

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

4

3 に答える 3

113

ここで動作します：

 .overme {
        width: 300px;
        overflow:hidden; 
        white-space:nowrap; 
        text-overflow: ellipsis;
        color: red;
    }
 <div class="overme">
        how much wood can a woodchuck chuck if a woodchuck could chuck wood?
    </div>

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

于 2013-03-08T11:27:45.840 に答える
3

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

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

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

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

の を取り外して、overflow: hidden;何.wrapが起こっているかを確認します。主な考え方は、テキストがオーバーフローしている場合は の.end左下に div が移動し、オーバーフローしていない場合は の右下に移動することです。次に、div は relative 内に絶対配置されるため、右に配置すると、テキストがオーバーフローしているときに表示され、テキストがオーバーフローしていないときにオーバーフローしています! おかしいですね。.left-side.text.ellipsis.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;
}

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

幸運を！

于 2013-03-08T12:25:14.210 に答える