Ellissi di testo CSS incluso il link "Altro"

Question

Quindi ho il seguente Fiddle che ha impostato un'ellissi in un testo in due righe. Quindi voglio avere un link "Altro" in linea con il testo.

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

Quindi, se il nostro testo ha più di due righe, dovrebbe assomigliare a questo:

Questo è corretto. Tuttavia:

Questo non è corretta (dovrebbe essere in linea con il testo).

codice è come segue:

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

E il 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; 
} 

Credo che deve essere facile ... Grazie in anticipo.

Answer 1

Il div all'interno di .text viene ancora visualizzato come elemento di blocco. Usare questo per risolvere il problema:

.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

Basta aggiungere al div qualche classe e dare esso 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> 

e

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

un metodo css base di puro -webkit-line-clamp, e si può abitudine il ... più contenuti come un boss:

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