Отобразить заголовок элемента li в две строки, чтобы соответствовать максимальной ширине

Jsfiddle as, https://jsfiddle.net/9qyv03u3/

Как я могу сломать li заголовок строки в две строки, чтобы они вписались в максимальную ширину?

В jsfiddle пункты меню помещаются в одну строку, но внутри моего контейнера 50% ширины в Firefox он отображается как:

Перемешанные меню

Это приведет к тому, что пользователь нажмет неправильную опцию меню. Итак, я предпочитаю все пункты меню, расположенные горизонтально, как,

   Save & Run  | Run saved |  Run selected  |
      suite    |   suite   |      tests     |
Источник

4 ответа

Решение

Вы можете отобразить элементы списка как ячейки таблицы. Возможно, вам придется немного подправить поля и отступы, но таким образом элементы всегда будут рядом друг с другом.

ul{
  display: table; 
  width: 20em;
  border: 4px solid gray;
  margin: 5em auto;
  padding: 20px 0 0 0;
  list-style: None;
  height: 30px;
}

li {
  display: table-cell;
  border-right-style: dotted;
  padding-right : 15px;
}
<ul>
  <li>Questions</li>
  <li>Tags liek bla blo foo bar bak nam plo and sni</li>
  <li>Users</li>
</ul>

Источник

Вы можете сделать это, сделав ul flexbox:

ul { 
  display: flex;
}


ul { 
  display: flex;
  width: 20em;
  border: 4px solid gray;
  padding: 0.5em 2em;
  margin: 5em auto;
  list-style: none;
  font: 14px verdana;
}

li {
  margin: 20px 30px 10px 0;
  border-right-style: dotted;
  padding-right : 15px;
  text-align: center;
}
<ul>
  <li>Save & Run suite</li>
  <li>Run saved suite</li>
  <li>Run selected tests</li>
</ul>

... или сделав каждый li table-cell:

li {
  display: table-cell;
}


ul { 
  width: 20em;
  border: 4px solid gray;
  padding: 0.5em 2em;
  margin: 5em auto;
  list-style: none;
  font: 14px verdana;
}

li {
  display: table-cell;
  margin: 20px 30px 10px 0;
  border-right-style: dotted;
  padding-right : 15px;
  text-align: center;
}
<ul>
  <li>Save & Run suite</li>
  <li>Run saved suite</li>
  <li>Run selected tests</li>
</ul>

Источник

CSS таблицы я бы предложил.

ul {
  width: 20em;
  border: 4px solid gray;
  padding: 0.5em 2em;
  margin: 5em auto;
  list-style: None;
  height: 30px;
  display: table;
  table-layout: fixed;
}
li {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-right: 1px dotted black;
}
<ul>
  <li>Questions & Answers</li>
  <li>Tags</li>
  <li>Users</li>
</ul>

Источник

Вы также можете использовать column-countсвойство определять CSS столбцы. Это быстрый и простой способ достижения желаемого эффекта.

ul {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  width: 25em;
  border: 4px solid gray;
  padding: 1.5em;
  margin: 5em auto;
  list-style: None;
  font-size: 12pt;
  font-family: Arial, sans-serif;
}
li {
  text-align: center;
  border-right-style: dotted;
  padding-right: 10px;
}
li:last-child {
  border: 0;
}
<ul>
  <li>Save & Run suite</li>
  <li>Run saved suite</li>
  <li>Run selected tests</li>
</ul>

Источник
Другие вопросы по тегам