Эллипсис CSS разбивает предложение на новые строки

Question

Когда у меня есть длинное слово ellipsis, оно разбивает id: и [ ] на разные строки. Кажется, я не могу объединить все одну линию. Я пробовал white-space: nowrap и display: inline-block. Есть идеи?

https://jsfiddle.net/b35m449x/4/

HTML

<div class="container">id: [<div class="trunc">userrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</div>]</div> 

CSS

.container { 
    display: inline-block; 
    white-space: nowrap; 
    border: 1px solid black; 
    width: 100%; 
} 
.trunc { 
    width: 100%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    white-space: nowrap; 
} 

Answer 1

Это может происходить из-за использования другого div в вашем коде. Если вам не нужно div просто удалить его и изменить контейнер, как это:

.container { 
display: inline-block; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
-o-text-overflow: ellipsis; 
border: 1px solid black; 
width: 100%; 
} 

И это будет работать нормально.

Хотя, если вам требуется отдельный стиль в этой конкретной строке (userrr ...), то вы можете заменить свой div на элемент span. Обратите внимание, что здесь также вы должны определить свои ellipsis и overflow в классе container.

Надеюсь, это помогло немного!

Answer 2

Псевдоэлементы на помощь! https://jsfiddle.net/0pmzq3p4/

.container { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    border: 1px solid black; 
 
    width: 100%; 
 
} 
 
.trunc { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    -o-text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 
.trunc::before, 
 
.trunc::after { 
 
    white-space: pre; 
 
} 
 
.trunc::before { 
 
    content: 'id: [\A\00a0'; 
 
} 
 
.trunc::after { 
 
    content: '\A]'; 
 
}

<div class="container"> 
 
    <div class="trunc"> 
 
userrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr 
 
    </div> 
 
</div>

Источники:

1. Мои знания
2. https://stackoverflow.com/a/17047836/915875
3. https://stackoverflow.com/a/5467676/915875

Answer 3

Найти обновленную скрипку, должно работать нормально. Обновление в коде:

.container { 
    display: inline-block; 
    white-space: nowrap; 
    border: 1px solid black; 
    width: 100%; 
    vertical-align:bottom; 
} 
.trunc { 
    width: 20%; 
    display: inline-block; 
    vertical-align:bottom; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    white-space: nowrap; 
} 

уведомления дополнительного дисплея: встроенный блок

Обновлено скрипка - https://jsfiddle.net/b35m449x/4/