cssの楕円を越えた複数行

Web デザインでは複数行のテキストを表示する必要があることがよくありますが、テキストの内容が長すぎると、あらかじめ設定された幅の制限を超えてしまい、レイアウトがわかりにくくなります。この状況を回避するには、冗長なテキストを省略し、楕円を表示して、全体的な美しさとユーザー エクスペリエンスを向上させる必要があります。実際、CSS スタイルを使用してこの効果を実現するのは非常に簡単です。次に、一般的に使用されるいくつかの方法を紹介します。

方法 1: 単一行の中央に楕円を配置する

この方法は最も単純で、1 行のみのテキスト コンテンツに適しています。これは、次の 2 行の CSS コードで実現できます。

overflow: hidden;
text-overflow: ellipsis; 

overflow は幅制限を超えたテキストを非表示にし、text-overflow は幅制限を超えたテキストを表現する方法で、省略記号はここで使用されます。ただし、これら 2 行のコードには制限があり、これは 1 行の省略にのみ適用されます。テキストが複数行ある場合は、他の方法を使用する必要があります。

方法 2: 複数行の両端に省略記号を配置する

この方法では複数行のテキストを使用でき、テキストの各行の最後の単語の末尾に省略記号が表示されます。ここで重要なのは、display: -webkit-box; を使用してテキスト コンテナを伸縮ボックスに変換することです:

.box {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; // 限制显示的行数
}

このうち、-webkit-line-clamp は最大行数を制限することを意味します。テキスト表示番号の。さらに多くの行を表示したい場合は、数値をより大きな数値に変更してください。

この方法の欠点は、Webkit カーネルをサポートするブラウザでのみ使用できるため、互換性に特別な注意を払う必要があることです。

方法 3: 複数行の省略記号 マウスをホバーして全文を表示する

この方法は、「全文を読む」ボタンと似ています。ユーザーがマウス ポインターをテキストの上に置くと、全文が表示されます。まず、テキストをコンテナの高さの範囲に制限し、余分なテキストは非表示にする必要があります。次に、JavaScript の Mouseenter イベントと MouseLeave イベントを通じて、テキストの表示と非表示を制御できます。

CSS 部分については、次のコードを通じて実現できます:

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3; //限定显示行数
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.show-text {
  display: block;
  cursor: pointer;
}

js を使用してイベント バインディングとテキストの表示と非表示を実装します:

var text = document.querySelector('.text');
var textHeight = window.getComputedStyle(text).height;

if(parseInt(textHeight) < text.scrollHeight) {
  text.classList.add('show-text');
  text.addEventListener('mouseenter', function() {
    text.classList.remove('text');
  });
  text.addEventListener('mouseleave', function() {
    text.classList.add('text');
  });
}

この方法はより効果的ですテキストの表示と非表示を制御するとユーザー エクスペリエンスが向上しますが、コーディング時間が長くなり、動的効果を実装する必要があります。

方法 4: Vue.js でフィルターを使用する

Vue.js は、データの双方向バインドとページの動的な応答を実現できるフロントエンド フレームワークです。 Vue.js では、フィルターを通じて複数行の楕円の効果を実現できます。次のコードを示します:

<p v-html="text | multilineEllipsis(3)"></p>

その中で、v-html ディレクティブはテキスト コンテンツのレンダリングに使用され、パイプライン記号 "|" はフィルターと式を調整するために使用されます。以下に示すように、フィルターは Vue.js インスタンスで定義できます:

Vue.filter('multilineEllipsis', function(text, lines) {
  var stopwords = ['the', 'in', 'on', 'at', 'is', 'are', 'to', 'and'];
  var reg = new RegExp(`(?:(?<=(^|(.{2,}?\W)))[${stopwords.join('')}])?(?<line>(.|\n){1,20}(?=(.|\n){0,20}[\W]$))`, 'g');
  var len = 0;
  var result = '';
  var lineCount = 0;

  while(len <= text.length && lineCount < lines) {
    var match = reg.exec(text.slice(len));
    if(match && match.groups.line) {
      result += match.groups.line;
      len += match[0].length;
    } else {
      break;
    }

    if(len < text.length) {
      var nextchar = text[len];
      if(nextchar !== ' ' && nextchar !== '
' && nextchar !== '') {
        result += '...';
        break;
      }
    }
    lineCount++;
  }

  if(len < text.length) {
    result += '...';
  }

  return result;
});

このフィルターはより複雑です。テキスト内で定期的なマッチングを実行し、要件を満たすテキストの各行を対応するテキストに変換します。 HTML. 省略記号をそのままにしておきます。このフィルタを使用すると、一般的な英単語のリストを参照して正規表現を作成することもできるため、テキスト表示の品質が向上します。

終了

上記は、CSS 複数行の省略記号を実装するためのいくつかの方法です。開発者は、特定のニーズに応じて適切な方法を選択できます。その中でも、Vue.js フィルターを使用した実装は比較的新しく人気があり、採用する開発者が増えています。どの方法を使用する場合でも、互換性と動的応答性に注意を払い、ユーザーに最高のエクスペリエンスを提供しながら Web サイト全体の美しさを向上させる必要があります。

以上がcssの楕円を越えた複数行の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。