cssの楕円を越えた複数行-フロントエンドQ&A-php.cn

cssの楕円を越えた複数行

PHPz

リリース： 2023-05-09 09:17:37

オリジナル

10250 人が閲覧しました

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 サイトの他の関連記事を参照してください。