web-dev-qa-db-ja.com

Firefoxでwebkitラインクランプが機能しないのはなぜですか？

このWebkitラインクランプを使用します。Chromeで動作しますが、Firefoxでは動作しません。コードは次のとおりです。

{
overflow: hidden;
text-overflow: Ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; /* number of lines to show */
line-height: X;        /* fallback */
max-height: X*4;       /* fallback */
}

Firefoxでも機能させるにはどうすればよいですか？

htmlcssfirefox
22
uklp

重要な更新：

Firefoxバージョン68Firefoxは_-webkit-line-clamp_ をサポートしています!!

デモスニペット（ caniuse ）

_p {
  width: 300px;
  border: 2px solid green;
  padding: 0.5em 0.5em 0 0.5em;
  overflow: hidden;
  text-overflow: Ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* number of lines to show */
}_
<p>When the CSS -webkit-line-clamp property is applied to a block of text (e.g., a paragraph), the text is limited to the specified number of lines (1 or more), and an Ellipsis character (…) is added to the end of the last visible line. - see <a href="https://webplatform.news/issues/2019-05-17">webplatform.news</a>

Firefoxは_-moz-_ベンダープレフィックスを使用する Geckoレンダリングエンジン を使用しますが、バージョン49以降、 Firefoxはいくつかの_-webkit-_プレフィックスのサポートを追加することを決定しました およびWebKit固有のインターフェース

注：CSS Overflow Module Level 3 Editor's draft には公式プロパティ line-clamp -Proprietary _-webkit-line-clamp_プロパティを置き換える可能性があります。

元の回答

できません。 _-webkit-line-clamp_は、Webkitを使用するブラウザー用です。 Firefoxは gecko で実行され、ベンダープレフィックス_-moz-_を使用します

興味があるなら、あなたは 私の答えをここで見ることができます ：フェードアウトフォールバックフィドル付きの ラインクランプ フェードを追加します非Webkitブラウザーの-outエフェクト回避策（Ellipsisの代わり）。

29
Danield

Firefoxでは、-webkit-line-clampが機能しません

ここで正常に動作するjavascriptコード
http://codepen.io/nilsynils/pen/zKNpkm?editors=1111

const containers = document.querySelectorAll('.container');
Array.prototype.forEach.call(containers, (container) => {  // Loop through each container
    var p = container.querySelector('p');
    var divh = container.clientHeight;
    while (p.offsetHeight > divh) { // Check if the paragraph's height is taller than the container's height. If it is:
        p.textContent = p.textContent.replace(/\W*\s(\S)*$/, '...'); // add an Ellipsis at the last shown space
    }
})
1
Lsb

/ ----ラインクランプ--- /

.line-clamp {
    position: relative;
    height: 2.7em; 
    overflow: hidden;
}
.line-clamp:after {
    background: $white;
    bottom: 0;
    position: absolute;
    right: 0;
    float: right;
    content: '\2026';
    margin-left: -3rem;
    width: 1rem;
}

@supports (-webkit-line-clamp: 2) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        / autoprefixer: off /
        -webkit-box-orient: vertical; 
        / autoprefixer: on /
        max-height:3.6em; 
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}

/ ----ラインクランプエンド--- /

0
Snehal Jadhav