CSSを使用して複数行のdivのテキストを省略記号で切り取るにはどうすればよいですか？

-2

複数行のdivフィールドの省略記号を使用してテキストを切り詰めるにはどうすればよいですか？ divが単一の行である場合に機能します。 divの右下隅に一番最後に省略記号を置くように、それを複数行で動作させるにはどうすればよいですか？CSSを使用して複数行のdivのテキストを省略記号で切り取るにはどうすればよいですか？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#div1 { 
 
    white-space: nowrap; 
 
    width: 12em; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    border: 1px solid #000000; 
 
} 
 

 
#div2 { 
 
    /*white-space: nowrap; */ 
 
    width: 12em; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    border: 1px solid #000000; 
 
    height: 3em; 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 

 
<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p> 
 

 
<p>This div uses "white-space: nowrap;":</p> 
 
<div id="div1">This is some long text that will not fit in the box</div> 
 

 
<p>This div uses "height: 3em;":</p> 
 
<div id="div2">This is some long text that will not fit in the box This is some long text that will not fit in the box This is some long text that will not fit in the box</div> 
 

 
</body> 
 
</html>

出典

2017-11-30 Chloe

（https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text） – jonrsharpe

[複数行のテキストに省略記号を適用する]の可能重複正直なところ、私は（これだと思います。https： //stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines）より優れた複製です。正直なところ、質問を書くときには表示されませんでした。 – Chloe

これはあまりにも複雑取得せずに働きました。しかし、クロスブラウザではサポートされていないようです。

.description { 
    height: 4.5em; 
    display: block; /* Fallback for non-webkit */ 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

出典

2017-11-30 19:19:23 Chloe

CSSを使用して複数行のdivのテキストを省略記号で切り取るにはどうすればよいですか？

答えて

関連する問題