uni-appのテキストは2行で表示され、2行を超える場合は省略記号で表示されます。

uni-appのテキストは2行で表示され、2行を超える場合は省略記号で表示されます。

Vue は大きなテキスト文字列を 2 行で表示し、省略記号を使用して余分な部分を示します。

CSS を介してテキストを設定し、楕円を超えて改行しないように強制します。

{
    white-space: nowrap; 文本强制不换行；
    text-overflow:ellipsis; 文本溢出显示省略号；
    overflow:hidden; 溢出的部分隐藏；
}

画像.png

3 行以上を表示したい場合は、省略記号を使用します。

        text {
            height: 35px;
            font-size: 12px;
            transform: scale(0.9);
            transform-origin: 0 0;
            // -webkit-transform-origin-x: 0;
            // -webkit-transform: scale(0.01);

            // 设置为两行。当文本内容超过两行时，将会自动隐藏多余的部分
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }

-webkit-line-clamp は、ブロック要素に表示されるテキストの行数を制限するために使用されます。この効果を実現するには、他の WebKit プロパティと組み合わせる必要があります。

一般的な組み合わせ属性:

1. オブジェクトをフレキシブル ボックス モデルとして表示するには、display: -webkit-box; を属性と組み合わせる必要があります。

2. フレックス ボックス オブジェクトの子要素の配置を設定または取得するには、-webkit-box-orient を属性と組み合わせる必要があります。

3. text-overflow: ellipsis; は複数行のテキストの場合に使用でき、省略記号「...」を使用して範囲を超えるテキストを非表示にします。