सीएसएस पाठ-अतिप्रवाह - अंडाकार लागू करता है, तो पाठ फैली (एन) वें लाइन

Question

मैं एक नई लाइन के लिए बह निकला से पाठ को रोकने के लिए के लिए निम्न कोड का उपयोग कर रहा:

.info-box{ 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
    height: 3em; 
    width: 300px; 
    font-size: 1em; 
    line-height: 1em; 
} 

यह काम करता है, के रूप में उम्मीद है, लेकिन इस बॉक्स में तीन लाइनों के लिए जगह है। यदि पाठ तीसरी पंक्ति से परे फैला हुआ है तो मैं एलिप्सिस को लागू करने के लिए ब्राउज़र को कैसे कम कर सकता हूं? या पाठ-ओवरफ्लो केवल एक से अधिक काम करता है?

यदि मुझे इसके लिए जेएस की आवश्यकता है तो मुझे परेशान नहीं होगा।

Answer 1

आप इसे इस तरह सीएसएस के साथ नकली बना सकते हैं।

div की शुरुआत में <span>...</span> जोड़ें।

<div class="info-box"><span>...</span>Lorem ipsum dolar etc.</div> 

अपने सीएसएस

1. में nowrap और text-overflow

2. से छुटकारा पाने के नीचे दाईं ओर से कुछ padding-right

3. स्थिति span जोड़ने नीचे।

सीएसएस

.info-box{ 
    overflow:hidden; 
    height: 3em; 
    width: 300px; 
    font-size: 1em; 
    line-height: 1em; 
    padding-right:20px; 
} 

.info-box span{ 
    position:relative; 
    top:31px; 
    left:297px; 
    display:inline-block; 
} 

कार्य उदाहरण:http://jsfiddle.net/jasongennaro/UeCsk/

FYI ... ऊपरी बाएँ, जहां अंडाकार माना जाता है पर एक छोटे से अंतराल नहीं होगा हो (क्योंकि हम position:relative; का उपयोग कर रहे हैं।

fyi 2 ... यह आपको कई पंक्तियों के साथ काम करना चाहिए (आपने प्रश्न में तीन का उल्लेख किया है) बशर्ते आप top और left समायोजित करें।

Answer 2

मुझे पता है कि यह एक पुराना सवाल है, लेकिन मुझे यह फिक्स मिला और यह मेरे लिए ठीक काम करता है।

https://codepen.io/martinwolf/pen/qlFdp

@import "compass/css3"; 

/* Martin Wolf CodePen Standard */ 

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700); 

* { 
    margin: 0; 
    padding: 0; 
    @include box-sizing(border-box); 
} 

body { 
    padding: 3em 2em; 
    font-family: 'Open Sans', Arial, sans-serif; 
    color: #cf6824; 
    background: #f7f5eb; 
} 

/* END Martin Wolf CodePen Standard */ 


$font-size: 26px; 
$line-height: 1.4; 
$lines-to-show: 3; 

h2 { 
    display: block; /* Fallback for non-webkit */ 
    display: -webkit-box; 
    max-width: 400px; 
    height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */ 
    margin: 0 auto; 
    font-size: $font-size; 
    line-height: $line-height; 
    -webkit-line-clamp: $lines-to-show; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}