CSS は単一行および複数行のテキスト省略 (切り捨て) を実装します。

この記事では、忘れた場合に備えて、このエフェクトの実装 (単一行テキストのオーバーフロー省略を含む) を簡単に記録します。具体的には、この文字配置効果を実現することです。

HTML コードは次のとおりです:

<div class="container">
  <div class="box">
    <div class="box-content">
      <h5 class="box-content-title">A公司</h5>
      <div class="box-content-desc singleline">A公司是B公司的重要战略伙伴，致力于为C行业提供一站式 解决方案，目前处于高速发展期。公司旗下有四个事业部，业务主要涵盖以下三个方面，2016年公司 年营业额达到100万元。
      </div>
      <div class="box-content-desc multiline">A公司是B公司的重要战略伙伴，致力于为C行业提供一站式 解决方案，目前处于高速发展期。公司旗下有四个事业部，业务主要涵盖以下三个方面，2016年公司 年营业额达到100万元。
      </div>
      <a class="box-content-link" href="javascript:void(0);">查看 >></a>
    </div>
  </div>
</div>

一般的な CSS スタイルは次のとおりです:

.container {
  margin: 50px auto;
  width: 328px;
}

.box {
  background: #f7f7f7;
}

.box-content {
  padding: 20px;
}

.box-content-title {
  margin: 0 0 20px;
}

.box-content-desc {
  color: #333;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px;
  overflow: hidden;
}

.box-content-link {
  color: #006ec8;
  font-size: 14px;
  text-decoration: none;
}

上記の overflow: hidden; は保持する必要があることに注意してください。

単一行のテキスト オーバーフローの省略:

1singleline{

2 text-overflow: ellipsis;

3 White-space: nowrap;

4}

text-overflow 属性は、オーバーフロー テキスト コンテンツの表示方法を指定します。属性値は elipsis(...)、clip (truncation)、またはカスタム文字列にすることができます。Chrome で試してみましたが、カスタム文字列は使いにくいことがわかりました。

複数行のテキスト オーバーフローの省略を見てください:

.multiline {
  display: -webkit-box;
  text-overflow: ellipsis;;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

ここでは、非標準の CSS 記述、つまり Webkit プレフィックス (Webkit カーネル ブラウザのプライベート属性) を使用した記述が使用されており、いくつかの古い記述方法が使用されていることがわかります。 ,

display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp: 4;

ここではあまり説明しません（実は説明が分かりません） , 複数行省略 やり方があまり良くありません。今後、他のより良い方法を研究しましょう。