Перенос текста в HTML ломает структуру

270

05 ноября 2021, 12:30

Итак, у меня есть див, внутри которого table-cell элементы (необходимо чтобы текст выровнялся по центру, иначе никак). При этом необходимо чтобы длина ячейки не была больше 180 пикселей. В итоге, из-за автоматического переноса текста, как я понимаю, появляется мнимый тег
или что-то вроде (зависящее от размера текста), который переносит все последующие элементы. Как это пофиксить?

<div>
        <div class="cell" onclick="settext(this)"><span style="font-size: 25px;">Небольшой текст</span></div>
            <div class="cell" onclick="settext(this)"><span style="font-size: 30px;">Текст</span></div>
            <div class="cell" onclick="settext(this)"><span style="font-size: 22px;">Очень длинный текст, который сломает мне всю структуру</span></div>
            <div class="cell" onclick="settext(this)"><span style="font-size: 20px;">Не такой длинный текст, но все равно беда</span></div>
    </div>

И CSS

.cell {
padding-right: 3px;
padding-left: 3px;
border: 6px solid black;
text-align: center;
background-color: white;
font-family: Arial;
width: auto;
height: 100px;
max-width: 180px;
display: inline-table;
cursor: pointer;
word-wrap: normal;
word-break: normal;
}
span {
display: table-cell;
vertical-align: middle; }

Answer 1

.d{ 
  display: -webkit-flex; 
  display: -moz-flex; 
  display: -ms-flex; 
  display: -o-flex; 
  display: flex; 
  justify-content: center; 
} 
 
.cell { 
padding-right: 3px; 
padding-left: 3px; 
border: 6px solid black; 
text-align: center; 
background-color: white; 
font-family: Arial; 
/*width: auto;*/ 
height: 100px; 
display: -webkit-flex; 
display: -moz-flex; 
display: -ms-flex; 
display: -o-flex; 
display: flex; 
justify-content: center; 
-ms-align-items: center; 
align-items: center; 
width: 180px; 
/*max-width: 180px;*/ 
/*display: inline-table;*/ 
cursor: pointer; 
/*word-wrap: normal; 
word-break: normal;*/ 
/*overflow: hidden;*/ 
} 
 
span { 
  /*display: table-cell;*/ 
  /*vertical-align: middle;*/ 
  /*width: 180px;*/ 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

<div class="d"> 
    <div class="cell" onclick="settext(this)"><span style="font-size: 25px;">Небольшой текст</span></div> 
    <div class="cell" onclick="settext(this)"><span style="font-size: 30px;">Текст</span></div> 
    <div class="cell" onclick="settext(this)"><span style="font-size: 22px;">Очень длинный текст, который сломает мне всю структуру</span></div> 
    <div class="cell" onclick="settext(this)"><span style="font-size: 20px;">Не такой длинный текст, но все равно беда</span></div> 
</div>

Answer 2

Флекс родительскому диву можно добавить? Если да, то так (класс прописать у дива):

.my-div-flex {
  display: flex;
  align-items: center;
}

Строка уже не прыгает, но требует еще каких-то дополнительных решений.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Установка фона для контейнера

Прошу помощи в следующей задаче: Хочу реализовать адаптивную секцию с текстом и изображением 50/50 на полный экранЖелательно в CSS самым элементарным...

124

HTML