0

введите сюда описание изображения

Итак, у меня есть див, внутри которого 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; }
1
  • Ну в тему, но... можно вообще убрать все onclick и в скрипте записать let cell = document.querySelectorAll('.cell'); for( let i = 0; i < cell.length; i++ ){ cell[i].addEventListener('click', function(){ settext(this); }); } 11 ноя 2019 в 23:39

2 ответа 2

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>

0

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.