Эллипсис переполнения CSS только для первого элемента

Question

Я пытаюсь сделать это, поэтому для каждой строки всегда отображается «место». Однако я хочу, чтобы название было тем, у которого есть многоточие, когда контент слишком длинный.

Это то, что я до сих пор:

<ul class="results"> 
    <li class="item"> <span class="title"><a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property</a></span><span class="place">Place</span> 
    </li> 
</ul> 

.item { 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap 
} 

http://jsfiddle.net/m6krvapf/5/

Беда в том, что это конец линии, которая отрезана, что означает «место» отрезанный первым. Можно ли всегда записывать место там и только поставить эллипсис на содержание слева от него?

Answer 1

Вы можете просто завернуть часть, которую вы хотите быть ellipsised как так:

<li class="item"> 
    <span class="ellipsis"><span class="title"><a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property</a></span></span> 
    <span class="place">Place</span> 
</li> 

затем использовать следующие стили:

.item { 
    white-space: nowrap; 
} 
.ellipsis { 
    text-overflow: ellipsis; 
    overflow: hidden; 
    display:inline-block; 
    max-width:85%; 
} 

Example

Для небольших экранов, где Место длиннее, чем 15% экрана (около 230px), вы можете использовать следующие носители запрос:

@media all and (max-width: 230px) { 
    .item { 
     overflow:auto; 
     padding-right: 3em; 
    } 

    .ellipsis { 
     max-width:none; 
     width:100%; 
     float:left; 
    } 

    .place 
    { 
     display:inline-block; 
     width:3em; 
     float:right; 
     margin-right:-3em; 
    } 
} 

Example

Answer 2

Вы можете превратить пролеты в блоки, использование CSS с плавающей и поменять свое место как в this Fiddle, CSS следующим образом:

.item span { 
    display: block; 
} 
.title { 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap 
} 
.place { 
    float: right; 
} 

для этого HTML:

<ul class="results"> 
    <li class="item"> 
     <span class="place">Place</span> 
     <span class="title"><a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property</a></span> 
    </li> 
    <li class="item"> 
     <span class="place">Place</span> 
     <span class="title"><a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property</a></span> 
    </li> 
</ul> 

Таким образом 'Place' остается на правая сторона всегда. Другое решение было бы использовать оригинальный HTML, но сделать пролеты блоков, они плавали слева и установите max-width для span.title как в this Example, который использует этот CSS:

.item span { 
    display: block; 
    float: left; 
    line-height: 1em; 
} 
.title { 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
    max-width: calc(100% - 50px); 
} 

Answer 3

Или вы можете использовать JS чтобы обрезать текст, а затем заменить ... на все, что вы хотите.

function shorten(text, maxLength) { 
var ret = text; 
if (ret.length > maxLength) { 
    ret = ret.substr(0,maxLength-3) + "..."; 
} 
return ret; 

}

Смотрите здесь: http://html5hub.com/ellipse-my-text/