マルチラインテキストのオーバーフロー：CSSやJSでの省略記号は、IMGタグで

Question

私が使用してみました：

• テキストオーバーフローの省略記号機能をCSS3で（ただし、複数行をサポートしていません）
• いくつかをdotdotdotのようなjqueryプラグイン（http://dotdotdot.frebsite.nl/）
• jquery autoellipsis（http://pvdspek.github.com/jquery.autoellipsis/）。

これらのツールのすべてが非常によく動作しますが、コンテンツがイメージを持っている場合dotdotdotまたはjquery.autoellipsisと切り捨てのための計算高さが間違っています。

誰かがこれに対処するための素晴らしいアイデアを持っているのかどうか疑問に思っていました。

Answer 1

マルチラインdivの固定高さを設定してから、imgと省略記号を完全に配置してスクリプトを簡素化することで、独自の省略記号の位置合わせオフセットを使用します。正しいオフセットは、font-sizeに固有であり、各文の特定の文字をカーニングするので、モノスペースフォントを使用しない限り、試行錯誤が必要です。基本的な構造は、このようなものです：あなたはX-ブラウザのサポートが必要な場合

<style type="text/css"> 
.truncate { position: absolute; top: 20px; right: 6px; background-color: #fff; } 
.lineup { top: 6px; } 
.monalisa { position: absolute; top: 2px; left: -18px; } 
.wrapper { position: relative; width: 360px } 
.textblob { width: 330px; height: 30px; } 
</style> 
<!--...--> 
<div class="wrapper"> 
    <img class="monalisa" src="hppt://www.stackoverflow.com/favicon.ico" alt="SO"/> 
    <div class="textblob"> 
    <span class="truncate">…</span> 
    <span class="snippet">blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah</span> 
    </div> 
</div> 

Answer 2

（オペラとWebkitのためだけでなく、@のC69のように説明します）。

私はより良い方法を見つけました。 また、手動で調整する。

jsfiddleの実例を見て​​ください。

HTML

<p> 
    Lorem ipsum dolor sit amet, consectetur 
</p> 

CSS

p { 
    height: 3.7em; 
    position: relative; 
    overflow: hidden; 
    width: 235px; 
} 

p:after{ 
    /* works since IE10 , ff16, chrome26, safari6.1,opera12, android4.4 ; previouse browser need prefixes */ 
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,2055,255,1) 30%); 
    /* for IE9,IE8 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1); 
    bottom: 0; 
    content: "..."; 
    float:right; 
    padding-left: 10px; 
    position: absolute; 
    right: 0; 
} 

出典：
1 mobify
2 css-tricks