28

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

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

この構文はdisplay: -webkit-flex構文と問題なく共存できますが、最近のすべての Webkit ベースのブラウザーでは、廃止されたと見なされています。

私の質問は：

'-webkit-line-clamp'古いトリックなしで、純粋な CSS でライン クランプを実現するにはどうすればよいですか?

4

4 に答える 4

30

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

私はそれらすべてを嫌いますが、Web 開発へようこそ。

于 2013-10-10T23:26:44.443 に答える
8

この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;}
于 2014-02-13T07:51:55.477 に答える
5

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 ソリューションよりもパフォーマンスが劣ります。

于 2018-10-26T12:18:49.607 に答える