CSS で行クランプを使用して省略記号テキストをカスタマイズする方法

行クランプを使用したカスタム省略記号テキスト

問題:

表示中に 2 行を超えるテキストの一部を非表示にする「...123」のようなカスタム テキストを含む非表示のオーバーフローT."

解決策:

将来的には、line-clamp プロパティにより便利な 1 行の解決策が提供される予定です:

line-clamp: 2 "...123 T.";

ハッキーな代替案 (現在のもの)ブラウザ):

line-clamp プロパティが広くサポートされるまで、ハッキングな回避策には次の CSS とHTML:

CSS:

.container {
  max-width: 200px;
  margin: 5px;
}

.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="container">
  <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>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lo <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
  </div>
</div>

注:この回避策には、省略記号を置き換える非表示のスパンを作成し、大きなボックス シャドウを使用して省略記号を非表示にすることが含まれます。後ろのテキスト。これは理想的な解決策ではありませんが、ラインクランプが広く採用されるまでの一時的な解決策となります。

以上がCSS で行クランプを使用して省略記号テキストをカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。