Css Добавить 3 точки на конце

Question

У меня проблема с добавлением 3 точек в конце div. Я слишком длинный текст и не имею, у меня достаточно места для отображения, на div я хочу отобразить 3 точки.

Я знаю, что многоточие с переполнением текста, но теперь корректно работает в IE и Firefox.

Это можно сделать по-другому.

https://jsfiddle.net/kq1Lp6og/

Я хочу, чтобы создать легкость в CSS, но не знаю, как без многоточия.

HTML

<div> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div> 

CSS

div{ 
    height:38px !important; 
    overflow: hidden; 
} 

Answer 1

div { 
 
    max-width:100%; 
 
    height:38px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    line-height: 1em; 
 
    max-height: 3em; 
 
    text-align: justify; 
 
    padding-right: 1em; 
 
    font-size: 20px; 
 
} 
 
div:before { 
 
    content: '...'; 
 
    position: absolute; 
 
    right: 2px; 
 
    bottom: 0px; 
 
}

<div> 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div>

Answer 2

Я знаю, что вы попросили CSS, но вы можете (или будущие читатели могут) не хотят CSS: это не обновляется при изменении размера окна, и это не очень хорошо, не гибко и не sy, чтобы иметь «...», у меня была та же проблема, что я пытался исправить с помощью CSS, и, наконец, я использовал библиотеку JS под названием dotdotdot.

PS: пожалуйста, не нравится, потому что он не соответствует всем критериям, у меня была точно такая же проблема, и я понял, что CSS не обязательно является лучшим вариантом (для пользователей и разработчиков), поэтому важно, чтобы вы знаете все, что у вас есть.

Answer 3

Проверьте свой ответ на подобный вопрос, чтобы добавить точки для мульти текста линии Add dots to the multi line text Это может помочь вам