सीएसएस टेक्स्ट इलिप्सिस "अधिक" लिंक सहित

Question

तो मेरे पास निम्न फ़िल्ड है जिसने टेक्स्ट में इलिप्सिस को दो पंक्तियों में सेट किया है। फिर मैं पाठ के साथ 'अधिक' लिंक इनलाइन करना चाहता हूं।

http://jsfiddle.net/csYjC/2876/

तो अगर हमारे पाठ दो से अधिक लाइनों है, यह इस तरह दिखना चाहिए:

यह सही है। हालांकि:

सही नहीं है यही कारण है कि (पाठ के साथ इनलाइन होना चाहिए)।

<div class="text"> 
    <div>Lorem ipsum dolor sit amet, Lorem Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem Lorem i</div> 
    <a href="#">More</a> 
</div> 

और सीएसएस:

.text{ 
    display: inline; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box; 
    line-height: 24px;  /* fallback */ 
    max-height: 48px;  /* fallback */ 
    -webkit-line-clamp: 2; /* number of lines to show */ 
    -webkit-box-orient: vertical; 
} 

.text a { 
    position: absolute; 
} 

मुझे लगता है कि आसान होना चाहिए ... अग्रिम धन्यवाद

कोड इस प्रकार की तरह है।

Answer 1

.text के अंदर div अभी भी ब्लॉक तत्व के रूप में प्रदर्शित किया जा रहा है। ठीक करने के लिए इस का उपयोग करें:

.text > div { display: inline; } 

http://jsfiddle.net/csYjC/2880/

Answer 2

डेमो: http://jsbin.com/hatuv/1/edit

<div class="text"> 
    <p>Lorem ipsum dolor sit amet, Lorem Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem Lorem i </p> <a href="#">More</a> 
    </div> 

सीएसएस

.text { 
    overflow: hidden /* just for clearing */ 
} 
.text p { 
    display: inline-block; 
    text-overflow: ellipsis; 
    width: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    margin-top: 0; 
    box-sizing: border-box; 
    padding-right: 40px; 
    margin-right: -40px; 
} 
.text a { 
    float: right 
} 

Answer 3

बस कुछ वर्ग div और देने के लिए जोड़ने यह display:inline;:

<div class="text"> 
    <div class="loremclass">Lorem ipsum dolor sit amet, Lorem Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem Lorem ipsum dolor sit amet</div> 
    <a href="#">More</a> 
</div> 

और

body { 
    margin: 20px; 
} 

.text{ 
    display: inline; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box; 
    line-height: 24px;  /* fallback */ 
    max-height: 48px;  /* fallback */ 
    -webkit-line-clamp: 2; /* number of lines to show */ 
    -webkit-box-orient: vertical; 
} 

.text a { 
    position: absolute; 
} 
.loremclass{display:inline;} 

Answer 4

-webkit-लाइन-क्लैंप पर एक शुद्ध सीएसएस विधि आधार है, और आप कर सकते हैं कस्टम एक मालिक की तरह ... और अधिक सामग्री:

@-webkit-keyframes ellipsis {/*for test*/ 
 
    0% { width: 622px } 
 
    50% { width: 311px } 
 
    100% { width: 622px } 
 
} 
 
.ellipsis { 
 
    max-height: 40px;/* h*n */ 
 
    overflow: hidden; 
 
    background: #eee; 
 

 
    -webkit-animation: ellipsis ease 5s infinite;/*for test*/ 
 
    /** 
 
    overflow: visible; 
 
    /**/ 
 
} 
 
.ellipsis .content { 
 
    position: relative; 
 
    display: -webkit-box; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-pack: center; 
 
    font-size: 50px;/* w */ 
 
    line-height: 20px;/* line-height h */ 
 
    color: transparent; 
 
    -webkit-line-clamp: 2;/* max row number n */ 
 
    vertical-align: top; 
 
} 
 
.ellipsis .text { 
 
    display: inline; 
 
    vertical-align: top; 
 
    font-size: 14px; 
 
    color: #000; 
 
} 
 
.ellipsis .overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 

 
    /** 
 
    overflow: visible; 
 
    left: 0; 
 
    background: rgba(0,0,0,.5); 
 
    /**/ 
 
} 
 
.ellipsis .overlay:before { 
 
    content: ""; 
 
    display: block; 
 
    float: left; 
 
    width: 50%; 
 
    height: 100%; 
 

 
    /** 
 
    background: lightgreen; 
 
    /**/ 
 
} 
 
.ellipsis .placeholder { 
 
    float: left; 
 
    width: 50%; 
 
    height: 40px;/* h*n */ 
 

 
    /** 
 
    background: lightblue; 
 
    /**/ 
 
} 
 
.ellipsis .more { 
 
    position: relative; 
 
    top: -20px;/* -h */ 
 
    left: -50px;/* -w */ 
 
    float: left; 
 
    color: #000; 
 
    width: 50px;/* width of the .more w */ 
 
    height: 20px;/* h */ 
 
    font-size: 14px; 
 

 
    /** 
 
    top: 0; 
 
    left: 0; 
 
    background: orange; 
 
    /**/ 
 
}

<div class='ellipsis'> 
 
    <div class='content'> 
 
     <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div> 
 
     <div class='overlay'> 
 
      <div class='placeholder'></div> 
 
      <div class='more'>...<a href="http://hai.li">more</a></div> 
 
     </div> 
 
    </div> 
 
</div>