Итак, у меня есть див, внутри которого 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; }
let cell = document.querySelectorAll('.cell'); for( let i = 0; i < cell.length; i++ ){ cell[i].addEventListener('click', function(){ settext(this); }); }