Проблемы с гибкими элементами в виджете чата (Streamlabs) ⇐ CSS

[Anonymous]

Всем доброго часового пояса, я впервые работал над CSS-кодом для виджета чата и застрял в проблемной ситуации.
Мой идеальный результат — это «Низ» в форме сердца и разделитель линии всегда остаются слева. Насколько я понял, используя гибкие элементы, но позже возникла проблема: когда слово слишком длинное, оно переполняется, выталкивая все из контейнера.
Я пробовал много вещей, но это всегда исправляйте одну проблему и создайте другую. Я пробовал контролировать переполнение с помощью brea-word, что теперь разбивает даже меньшее слово, например «эй», или генерирует вторую строку, когда я обнаруживаю более трех слов.
Я делюсь фотографиями некоторых ошибок, которые я получил
Без разрыва слов: разрыв-слово
С разрывом слов: разрыв-слово< /p>
Есть ли способ, чтобы украшения всегда оставались слева, в то время как блок сообщений не слишком сильно уменьшал свое пространство и не обрезал слова странным образом?
Я разместил код, который использую, он предназначен для стримлабов.
Добавьте Stackblitz
https: //stackblitz.com/edit/stackblitz-starters-nxe5cq?file=index.html
CSS
/* GLOBAL BOX */

@import url('https://fonts.googleapis.com/css2?famil ... splay=swap');

*{
box-sizing: border-box;
}

html, body {
height: 100%;
overflow: hidden;
}

/* BODY */

body {
font-family: 'Montserrat';
font-weight: 700;
line-height: 1.5em;
}

/* MESSAGE CONTAIN */

#log>div {
animation: fadeInUp 0.4s ease-in-out forwards, fadeOut 0.25s ease {message_hide_delay};
-webkit-animation: fadeInUp 0.4s ease-in-out forwards, fadeOut 0.25s ease {message_hide_delay};
padding-bottom: 10px;
}

.colon {
display: none;
}

#log{
display: table;
position: absolute;
table-layout: fixed;
bottom: 0;
left: 0;
padding: 0 10px 10px;
width: 100%;
}

#log>div{
display: block;
}

#log>div .deleted{
visibility: hidden;
}

/* EMOTES PROPERTIES */

#log .emote {
position: relative;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background: #F0F0F0;
padding: 0.4em 0.2em;
}

#log .emote img {
display: inline-block;
height: 1em;
opacity: 0;
}

/* MESSAGE PROPERTIES */

#log .meta,#log .message {
display: block;
vertical-align: left;
}

.badge {
display: none;
}

#log .meta {
z-index: 1;
position: relative;
background: #FF4E6B;
width: fit-content;
border-radius: 15px;
font-size: 20px;
text-transform: uppercase;
text-align: center;
padding: 10px 20px;
margin-top: -2px;
}

#log .name{
color: #FFFFFF;
}

.container{
display: flex;
width: 100%;
column-gap: 20px;
margin: -20px 0px 0px 20px;
}

.thread {
border: none;
border-left: 7.5px dotted #FF4E6B;
margin-top: 2.5px;
}

.message-container {
z-index: 0;
display: flex;
width: 90%;
}

#log .message {
display: flex;
background: #FFF2F2;
min-width: 40%;
max-width: 90%;
padding: 20px 20px 20px 20px;
border: 5px solid #FF4E6B;
outline: 2px solid #FF4E6B;
outline-offset: 5.5px;
border-radius: 25px;
margin-bottom: 15px;
color: #FF4E6B;
font-size: 20px;
text-align: justify;
word-break: break-word;
}

.separator {
width: 100%;
flex: 1 0 fill;
background: blue;
}

.divisor {
display: flex;
flex: 0 0 40px;
background: green;
border-left: 5px dotted #FF7F95;
align-items: center;
justify-content: center;
}

.heart01{
position: absolute;
margin: -20px 0px 0px 16px;
}

.heart01::before, .heart01::after {
position: absolute;
content: "";
background: #FF7F95;
height: 20px;
width: 12.5px;
border-radius: 20px 20px 0px 0px;
}

.heart01::before {
transform: rotate(-45deg);
transform-origin: 0 100%;
}

.heart01::after {
transform: rotate(45deg);
transform-origin: 100% 100%;
margin-left: -12px;
}

.heart02{
position: absolute;
margin: -17px 0px 0px 16px;
}

.heart02::before, .heart02::after {
position: absolute;
content: "";
background: #FFF2F2;
height: 14px;
width: 6.5px;
border-radius: 20px 20px 0px 0px;
}

.heart02::before {
transform: rotate(-45deg);
transform-origin: 0 100%;
}

.heart02::after {
transform: rotate(45deg);
transform-origin: 100% 100%;
margin-left: -5.5px;
}

HTML







{from}




{message}












Подробнее здесь: https://stackoverflow.com/questions/781 ... streamlabs