Остановить перенос слов

Question

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

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

Я поместил класс CSS «white-space: nowrap» в мой div, который делает текст не завершенным, но теперь он полностью выходит за пределы div.

<div class="col"><p style="white-space: nowrap; font-size:12pt">{{description}}</p></div> 

Если бы я мог получить мой DIV просто вырезать текст, если бы она достигает конца DIV я думаю, что должно быть в порядке.

Как я могу в принципе сказать свой div; «Эй, покажите это описание только на одной линии, и если оно длиннее, просто отключайте его».

Answer 1

Вот как вырезать текст покинуть в одной строке, на основе ширины элемента:

document.querySelector('button').addEventListener('click',function() { 
 
    document.querySelector('p').classList.toggle('expanded'); 
 
});

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

 
p.expanded { 
 
    text-overflow: initial; 
 
    white-space: initial; 
 
} 
 

 
p.expanded+button { display: none; }

<p>n vitae aliquet mi. Aliquam imperdiet orci ipsum, vel facilisis quam venenatis a. Donec rhoncus lectus sit amet fringilla accumsan. Vivamus convallis risus eu porta porta. Aenean blandit varius ultrices. Integer metus tellus, tristique ac cursus quis, tempor sit amet turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam accumsan laoreet orci eget fringilla. Maecenas ac imperdiet orci. Morbi imperdiet accumsan augue nec ultrices. Donec arcu felis, molestie a metus in, feugiat molestie libero. In sit amet odio ut neque posuere ultrices eu at felis. Donec et bibendum ligula, at varius massa. In velit neque, egestas in velit venenatis, sagittis ornare odio.</p> 
 
<button>More...</button> 
 

Answer 2

Добавить overflow: hidden;:

<div class="col"><p style="white-space: nowrap; font-size:12pt; overflow: hidden;">Bla blablablablablablablablablablab blablabla blabla blablabla blabla bla ablablablablab blablabla blabla blablabla blabla bla ablablablablab blablabla blabla blablabla blabla bla ablablablablab blablabla blabla blablabla blabla bla</p></div>

Answer 3

используйте эти стили в параграфе. это то, что вы ожидаете

.p { 
    text-overflow: ellipsis; 

    /* Required for text-overflow to do anything */ 
    white-space: nowrap; 
    overflow: hidden; 
}