FFとIEの文字の詳細

-1

なぜ私はFirefoxとIEで文字幅に問題があります。なぜなら、スライダにはキャプションがあり、Firefoxではオーバーフローを設定していて、IEはChromeよりも文字がmorです。FFとIEの文字の詳細

font-weight私は-moz-と-ms-タグを追加する方法300

div { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    -webkit-box-orient: vertical; 
 
    display: -webkit-box; 
 
    -webkit-line-clamp: 2; 
 
    font-size: 20px; 
 
    text-shadow: 1px 1px 3px #000000, -1px -1px 3px #000000; 
 
}

<div> 
 

 
    Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet 
 
    consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt 
 
    ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet 
 
    consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt 
 
    ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit am Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet 
 
    consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt 
 
    ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit am Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet 
 
    consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt 
 
    ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit am Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet 
 
    consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt 
 
    ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit am Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet 
 
    consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt 
 
    ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit am consectetur adipiscing 
 
    elit sed do eiusmod tempor incididunt ut labore. 
 

 
</div>

出典

2016-11-01 ml92

を私にあなたのコードを与えます。 – Kevin

@KevinAartsenは – ml92

を更新しました。あなたはそのテキストのトリミングを達成するためにChrome/Safari（Webkit）固有のCSSを使用しています。おそらく、コンテナの幅と高さを他の方法（例えば 'width'と' height'を使って）に制限し、テキストが適切に切り捨てられているかどうかを調べることができます。 – feeela

div { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -ms-box-orient: vertical; 
    display: -webkit-box; 
    display: -moz-box; 
     display: -ms-box; 
    -webkit-line-clamp: 2; 
    -moz-line-clamp: 2; 
     -ms-line-clamp: 2; 
    font-size: 20px; 
    text-shadow: 1px 1px 3px #000000, -1px -1px 3px #000000; 
}

注意あります。 -moz-はfirefoxで使えるので、-ms-はインターネットエクスプローラのインターネットエクスプローラです。

-moz- -webkit-についての詳細情報と、ここ-ms-：CSS What are -moz- and -webkit-?

出典

2016-11-01 10:41:19 Kevin

Firefoxで同じ問題が発生しました。 – ml92

答えを@ ml92に更新しました – Kevin

また、Safariブラウザでもそれをテストしても動作します:) @ ml92 – Kevin

答えて

関連する問題