web-dev-qa-db-ja.com

'-webkit-line-clamp'を使用しない線のクランプ

古き良き時代には、純粋なcssを使用して行をクランプするためのトリックがWebkitに存在していました。

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

この構文は喜んでdisplay: -webkit-flex構文と共存しますが、現代のすべてのWebkitベースのブラウザーでは、時代遅れと見なされています。

私の質問は：

廃止された'-webkit-line-clamp'トリックを使用せずに、純粋なCSSで行クランプを実現するにはどうすればよいですか？

csswebkitflexbox
24
shabunc

唯一のクロスブラウザーソリューションは、js afaikを使用することです。省略記号を使用した複数行の切り捨ての問題に対するいくつかの解決策について、ここで説明します。 http://css-tricks.com/line-clampin/

私はそれらすべてが嫌いですが、ウェブ開発へようこそ。

27
Jethro Larson

このCSSを使用してみてください

.line-clamp:after {
background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
content: "...";
font-weight: bold;
padding: 0 20px 1px 45px;
position: absolute;
right: 0;}

.line-clamp {
height: 5.6em;
line-height: 1.4em;
overflow: hidden;
position: relative;}
8
Vipin

CSSオーバーフローレベル3仕様 標準line-clamp プロパティ（接頭辞付きの´-webkit-`ソリューションにある癖はありません）。残念ながら、主要なブラウザはまだこの機能をサポートしていません。

そのため、今のところ、このプロパティをサポートしていないブラウザにはポリフィルを使用する必要があります。 CSS-Tricksは3つのソリューションを説明しています 、それぞれに長所と短所があります。

  1. 標準CSSを使用する

    .fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}

.fade::after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

    長所：現在のブラウザはすべてこれをサポートしています。短所：省略記号の代わりにフェードアウトがあり、高さを手動で設定する必要があります。

  2. Operaの-o-Ellipsis-lastline値

    .last-line {
  height: 3.6em; /* exactly three lines */
  text-overflow: -o-Ellipsis-lastline;
}

    長所：期待どおりに表示します。短所：Operaの古いバージョンでのみ動作し、高さを手動で設定する必要があります

  3. JavaScriptの使用（ Clamp.js ）

    var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

    長所：期待どおりに表示され、さまざまなオプションで柔軟に表示できます。短所：JSライブラリが機能する必要があり、CSSソリューションよりもパフォーマンスが劣ります。

3
Sebastian Zartner