Как заставить мои столбцы CSS3 разрываться только при переносе строк?

Question

В настоящее время я работаю над страницей, которая использует набор наборов полей на одной странице формы, которая также реализует столбцы CSS3.

Проблема заключается в том, что столбцы переносятся таким образом, что иногда остается половина набора полей.при переходе к следующему столбцу.

В проекте, над которым я на самом деле работаю, я смотрю на легенду набора полей в Chrome 15, которая сращена пополам с верхней половиной букв внизуодного столбца и нижней половины букв в верхней части следующего столбца.В Firefox 7 я не вижу этой проблемы (может быть, они уже ломаются ТОЛЬКО при разрыве строки или после элементов блока).

Я не думаю, что это ошибка, специфичная для Chome, я думаю, что это простопока не указано, как это должно быть сделано, или что-то в этом роде.

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

Я сделал макет ситуации.Смотрите это jsFiddle .(Очевидно, выглядит немного иначе, чем проект, который я описал выше, но та же ошибка.)

Answer 1

Похоже, в webkit реализовано column-break-inside, которое можно добавить к правилу fieldset, чтобы оно не разбивало их по столбцам

fieldset {
    border: 1px solid #ddd;
    padding: 1.0em;
    -webkit-column-break-inside: avoid;
}

Answer 2

Просто общие сведения для тех, кто сталкивается с этим форумом и нуждается в решении для Firefox.

На момент написания этой статьи Firefox 22.0 не поддерживал свойство column-break-inside даже с префиксом -moz-.

Но решение довольно простое: просто используйте display:table;. Вы также можете сделать **display:inline-block; Проблема с этими решениями заключается в том, что элементы списка потеряют свой элемент стиля списка или значок маркера.

** Кроме того, одна проблема, с которой я столкнулся при display:inline-block;, заключается в том, что если текст в двух последовательных элементах списка очень короткий, нижний элемент оборачивается и совпадает с текстом над ним.

display:table; является наименее худшим из обоих решений.

Подробнее здесь: http://trentwalton.com/2012/02/13/css-column-breaks/

Answer 3

Вы должны использовать break-inside: avoid;

Полный синтаксис:

li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

см .: https://css -tricks.com / almanac / properties / b / break-inside /