CSS のカスタム インジケーターを使用してテキスト オーバーフローを非表示にする方法

インジケーターを使用したテキスト オーバーフローの非表示

2 行を超えるテキストを圧縮して非表示のコンテンツを示すには、カスタム ソリューションを次の手順で実装できます。 line-clamp プロパティの将来の実装。

Custom解決策

1. テキスト コンテナの表示を 2 行に制限するには、テキスト コンテナの行の高さと最大高さを設定します。
2. あふれたテキストを非表示にするには、overflow: hidden プロパティを使用します。
3. 省略記号によって表示されるテキストを隠す影効果を作成します。それ以外の場合は。
4. 絶対配置を使用して、目的のインジケーター テキストを含むスパン要素をコンテナーの右下に配置します。
5. スパン要素の先頭に省略記号を追加し、インジケーター テキストをその

CSS

.main-text {
  line-height: 1.2em;
  max-height: calc(2 * 1.2em);
  overflow: hidden;
  display: inline-block;
  position: relative;
}

.main-text:after {
  content: "123 T.";
  display:inline-block;
  width:40px;
  position:relative;
  z-index:999;
  box-shadow:
    40px 0 0 #fff,
    80px 0 0 #fff,
    120px 0 0 #fff,
    160px 0 0 #fff;
  color: #8e8f8f;
  font-size: 10px;
  background: #fff;
  margin-left:2px;
}

.main-text span {
  position: absolute;
  top: 1.2em;
  right: 0;
  padding: 0 3px;
  background: #fff;
}

.main-text span:before {
  content: "...";
}

.main-text span:after {
  content: "123 T.";
  color: #8e8f8f;
  font-size: 10px;
}

HTML

<div class="main-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
  vitae. <span></span>
</div>

このソリューションは、オーバーフロー テキストを非表示にし、表示します。 2 行後に指定されたインジケーター

以上がCSS のカスタム インジケーターを使用してテキスト オーバーフローを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。