CSS-省略記号を使用して長い文字列を自動的に短くする

Question

こんにちは、長い文字列を短縮し、省略記号を使用して末尾にドット（...）を入れています。問題は、文字列に空白が含まれている場合、最初に文字列を破棄したい場合、次にオーバーフローしてdotes（...）を置く場合です。例えば。私はファームハウスと重なるウィンドウ振付家のサイズを変更するには、省略記号を使用しない場合、私は二つの文字列

Choreographers Farm Houses 

を持っている...

私は、ウィンドウのサイズを変更するには、省略記号を使用するとき、私は

Choreogra... Farm Ho... 

を取得します私が欲しいのは

Choreogra...  Farm 
        Houses 

そして、より小さな画面の場合

Chore...   Farm 
       Hous... 

フィドル：https://jsfiddle.net/7fpt4m5e/3/

Answer 1

text-overflowが複数行

Updated fiddle

.block2 p { 
    overflow:hidden; 
    text-overflow:ellipsis; 
    width:98%; 
} 

チェックこの記事を、applying-an-ellipsis-to-multiline-textに悪いのブラウザをサポートしているのにどのように

Answer 2

代わりの「ファームハウスは、」あなたは、それはあなたが達成したい効果を行い、このように「Farm Houses」を書くべき書き込み。それは、特別な支援を必要としないため、このソリューションは、すべてのブラウザでwhite-space: nowrapまたはテキストオーバーフロー

https://jsfiddle.net/7fpt4m5e/6/

作品のブラウザで悪いサポートへの回答します。

Answer 3

残念ながら、そこにあなたがより多くの方法を見つけるだろう... white-space: nowrapを削除しますtext-overflow: ellipsisは1行だけを切り捨てます。

ここでできることは、Webkitブラウザ& Firefoxで動作するline-clampを使用することです。

ここでは、切り捨て後の行数を指定します。-webkit-line-clamp & -moz-line-clampです。 line-clamp利用

例は次のとおりです。

div { 
 
    max-height: 42px; 
 
    width: 40px; 
 
    margin-bottom: 10px; 
 
    font-size: 16px; 
 
    overflow: hidden; 
 
    color: #000; 
 
    display: -webkit-box; 
 
    -webkit-line-clamp: 2; 
 
    -webkit-box-orient: vertical; 
 
    -moz-line-clamp: 2; 
 
    -moz-box-orient: vertical; 
 
}

<div>the quick brown fox jumps over the lazy dog</div> 
 
<div>the quick brown fox jumps over the lazy dog</div>

そうでない場合、あなたはハンドルを自分で自分-擬似セレクター-でコンテンツを行くことができます - （ "..." ）あまりにも。