2012-03-01 5 views
5

固定サイズのdivを追加しようとしていますが、これはテキストの折り返しとオーバーフローの省略記号も示しています。CSS 2行テキスト折り返し省略記号

これは可能ですか?ここで

私がこれまでにだところです:

として最高の私が言うことができるように

.mydiv { 
 
     font-family: Georgia, "Times New Roman", Times, serif; 
 
     font-size: 14px; 
 
     line-height: 20px; 
 
     display: block; 
 
     overflow: hidden; 
 
     text-overflow: ellipsis; 
 
     width: 120px !important; 
 
     height: 40px !important; 
 
     border: 1px solid #000000; 
 
}
<div class="mydiv"> 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div>

+0

重複したhttp://stackoverflow.com/questions/5914783/simulate-text-overflow-ellipsis-in-css2? – blobmaster

答えて

3

、これには、可能ではないではありません:テキストのオーバーフローのためのすべてのサポート:省略記号が必要ですwhite-space:nowrap(明らかに1行に制限され、最初の要件を満たしていません)。

複数行の折り返し、省略記号の場合は、javacriptソリューション(たとえばjTruncate)に悩まされていると思います。

+0

また、他の複数行と省略記号のソリューションについては、http://stackoverflow.com/questions/3404508/cross-browsers-mult-lines-text-overflow-with-ellipsis-appended-within-a-widthhe –

関連する問題