テキストが長すぎる場合は、省略記号が表示され、マウスがスキップされてコンテンツ全体が表示されます (UI コンポーネント バージョンは使用しません)。

ビジネス シナリオ:実際のページ開発プロセスでは、多くの場合、テキストが長すぎるため、省略記号を表示する必要があり、マウスを置くとすべてのコンテンツが表示されます。ほとんどの場合、UI コンポーネントtooltipまたはpoptip

しかし、実際には、スタイルの要件がそれほど高くない場合も多く、このとき、時間と労力を節約する方法を選択できます。

最終的な効果は以下の通りです。

方法 1. CSS を使用する

1.省略記号が長すぎる場合に省略記号を表示する効果を実現するには、次のスタイルを追加します。

オーバーフロー: 非表示; ホワイトスペース: ナラップ; テキストオーバーフロー: 省略記号;

2.対応するラベルにタイトルを追加します。コードは次のとおりです。ビジネス シナリオで説明されている効果を実現できます。

 <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="value">{
    
    {
    
    value}}</div>

方法 2、フィルターを使用する

1. vue プロジェクトのフィルター関数を作成し、デフォルトの表示最大長をカスタマイズします

// 1、书写过滤函数
filter: {
    
    
  ellipsis (value) {
    
    
        if （value.length > 10）{
    
    
        	return value.slice(0,10) + '...'
        }
        return value;
    }
}

2.フィルター機能はタイトルと組み合わせて使用​​します

<div :title="value">{
    
    {
    
     value | ellipsis }}</div>

終わり〜