CSS Text Ellipsen einschließlich "Mehr" Link

Question

So habe ich die folgende Fiddle, die eine Ellipse in einem Text in zwei Zeilen gesetzt hat. Dann möchte ich einen 'Mehr' Link inline mit dem Text haben.

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

Also, wenn unser Text mehr als zwei Zeilen hat, sollte es so aussehen:

Das ist richtig. Allerdings:

, die nicht korrekt ist (sollte inline mit dem Text sein).

-Code ist wie folgt:

<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> 

Und die CSS:

.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; 
} 

Ich denke, muss ... Vielen Dank im Voraus einfach sein.

Answer 1

Das div innerhalb von .text wird immer noch als Blockelement angezeigt. Verwenden Sie dieses Problem zu beheben:

.text > div { display: inline; } 

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

Answer 2

DEMO: 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> 

CSS

.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

nur in den etwas Klasse div und geben es 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> 

und

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

ein reines CSS-Verfahren basieren auf -webkit-line-Klemme, und Sie kann Gewohnheit der ... mehr Inhalt wie ein Chef:

@-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>