मल्टी लाइन पाठ-अतिप्रवाह: सीएसएस या जे एस में अंडाकार, img टैग के साथ

Question

मैं उपयोग करने की कोशिश:

• पाठ-अतिप्रवाह अंडाकार सुविधा CSS3 में (लेकिन बहु लाइन का समर्थन नहीं करता)
• कई jquery plugins जैसे dotdotdot (http://dotdotdot.frebsite.nl/)
• jquery autoellipsis (http://pvdspek.github.com/jquery.autoellipsis/)।

ये सभी उपकरण काफी अच्छी तरह से काम करते हैं, लेकिन यदि सामग्री में छवियों की डॉटडॉटडॉट या jquery.autoellipsis के साथ छंटनी के लिए गणना की गई ऊंचाई गलत है।

मैं सोच रहा था कि किसी के पास इस से निपटने के लिए कोई अच्छा विचार है (शायद कुछ सर्वर-साइड प्रोसेसिंग?), अग्रिम धन्यवाद :-)।

Answer 1

मल्टी-लाइन div के लिए निश्चित ऊंचाई निर्धारित करके अपने स्वयं के इलिप्सिस पोजिशनिंग ऑफ़सेट का उपयोग करें, फिर पूरी तरह से स्क्रिप्ट को सरल बनाने के लिए img और इलिप्सिस को स्थितिबद्ध करें। दायां ऑफसेट font-size और प्रत्येक वाक्य के विशेष अक्षरों के कर्नाई के लिए विशिष्ट है, इसलिए जब तक एक मोनोस्पेस फ़ॉन्ट का उपयोग नहीं किया जाता है तब तक परीक्षण और त्रुटि आवश्यक होती है। बुनियादी संरचना कुछ इस तरह है:

<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

आप एक्स ब्राउज़र समर्थन (ओपेरा और वेबकिट, @ c69 तरह समझाया के लिए न केवल) की जरूरत है।

मुझे एक और अधिक शानदार तरीका मिला। लेकिन मैन्युअल रूप से समायोजन के लिए भी।

jsfiddle पर एक कामकाजी उदाहरण पर नज़र डालें।

एचटीएमएल

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

सीएसएस

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