ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS は単一行および複数行のテキスト省略 (切り捨て) を実装します。

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

高洛峰
リリース: 2016-11-21 13:17:35
オリジナル
1414 人が閲覧しました

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

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;

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

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート