text-overflow: свойство эллипса CSS не работает должным образом

Я пытаюсь использовать CSS text-overflow: свойство ellipsis на div HTML, имеющем динамическую высоту. JS скрипку ссылка https://jsfiddle.net/GS2306/bj8jg6nc/1/text-overflow: свойство эллипса CSS не работает должным образом

#first { 
    max-height: 310px; 
    width: 300px; 
    border: 1px solid red; 
} 
.one { 
    max-height: 150px; 
    width: inherit; 
    border: 1px solid blue; 
    font-size: 40px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    min-height: 100px; 
    white-space: nowrap; 
} 
.two { 
    height: 100px; 
    width: inherit; 
    border: 1px solid green; 
}

Я не в состоянии увидеть полный текст, занимающей все доступное пространство.

Но когда я удаляю свойство «white-space: nowrap» из div с классом «один», я вижу текст, занимающий доступное пространство. https://jsfiddle.net/GS2306/bj8jg6nc/2/

Как сделать текст занимают максимальную ширину 150 пикселей в этом случае и показать переполненном текст как многоточие для оставшейся части

источник

2015-06-26 gauravs

какой браузер вы в –

ты хочешь использования многострочного ап d также многоточие? –

@Cayce K. Я использую Google Chrome – gauravs

Вы можете рассмотреть возможность использования display: -webkit-box и с line-clamp: <num> будет исправить. Вы хотите X строк текста. Все, что после этого, изящно отрезано. Это «линия зажима», и это совершенно законное желание.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700); 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

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

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

<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</h2>

И с разметкой.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700); 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

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

 
.one { 
 
    display: block; 
 
    /* Fallback for non-webkit */ 
 
    display: -webkit-box; 
 
    max-width: 400px; 
 
    height: 72.2px; 
 
    /* Fallback for non-webkit */ 
 
    margin: 0 auto; 
 
    font-size: 26px; 
 
    line-height: 1.4; 
 
    -webkit-line-clamp: 2; 
 
    -webkit-box-orient: vertical; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div id="first"> 
 
    <div class="one">Using text-overflow is a difficult skill to master. Please help me with your comments</div> 
 
    <div class="two"></div> 
 
</div>

Некоторые ссылки можно рассмотреть интересные:

источник

2015-06-26 19:21:41

как это работает? что вы исправили? –

@ToniLeigh Проверьте выше. –

Использование 'display: -webkit-box;' и '-webkit-line-clamp: 2;'. –

text-overflow: свойство эллипса CSS не работает должным образом

ответ

Смежные вопросы