表示の省略記号を超える単一行、複数行のテキスト
1. 1 行テキストの省略
.ellipsis-line {
border: 1px solid #f70505;
padding: 8px;
width: 400px;
overflow: hidden;
text-overflow: ellipsis; //文本溢出显示省略号
white-space: nowrap; //文本不会换行
}
文法：
| 価値 | デフォルト | 該当する |
|---|---|---|
| クリップ；省略記号 | クリップ | すべての要素 |
| 属性 | 説明 |
|---|---|
| クリップ | オブジェクト内のテキストがはみ出す場合、省略記号（…）は表示されず、はみ出した部分が切り取られます。 |
| 省略記号 | オブジェクト内のテキストがオーバーフローすると、省略記号 (…) が表示されます。 |
注:省略記号を使用する場合は、overflow:hidden; white-space:nowrap; と連携する必要があります。これら 3 つのスタイルは、一緒に使用すると効果的です。
2. 複数行テキストの省略
css プロパティを直接使用する -webkit-line-clamp: n; set
WebKit ブラウザーやモバイル端末 (ほとんどが WebKit コアを備えたブラウザー) でページを実装するのは比較的簡単で、WebKit の CSS 拡張プロパティ (WebKit はプライベート プロパティです) -webkit-line-clamp; を直接使用できます。ドラフト CSS 仕様に表示されない、サポートされていない WebKit プロパティです。
-webkit-line-clamp:n;ブロック要素に表示されるテキストの行数を制限するために使用されます。この効果を実現するには、他の WebKit プロパティと組み合わせる必要があります。一般的なバインディング プロパティ:display: -webkit-box;オブジェクトをフレックス ボックス モデルとして表示するために組み合わせる必要があるプロパティ。-webkit-box-orientフレックスボックス オブジェクトの子要素の配置を設定または取得するために組み合わせる必要があるプロパティ。text-overflow: ellipsis;、複数行のテキストの場合に使用できます。省略記号「...」を使用して、範囲を超えたテキストを非表示にします。
このプロパティは、WebKit ブラウザーまたはモバイル (主に WebKit コア) ブラウザーにのみ適しています。
.multi-line {
border: 1px solid #f70505;
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
3. 例:
render:(h,params)=> {
return h('Tooltip', {
props: {
placement:'bottom',
content: params.row.result,
transfer: true,
maxWidth: 800,
}
}, [
h('span', {
style: {
display: 'inline-block',
width: '100px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
},
}, params.row.result)
])
}