HTML/CSS - Лучшая практика для сохранения пробелов на определенных элементах?

Каков наилучший способ сохранить пробел в HTML? У нас есть много страниц, которые выводят данные из нашей базы данных, и данные могут содержать несколько пробелов. Представленные элементы HTML, содержащие данные, отличаются от тегов привязки (<a>), spans (<span>), table rows (<tr>, <td>, etc.

Самое простое, что нужно сделать сейчас - добавить глобальный класс css, например:

body a, span, tr, td { white-space: pre; }

Мне интересно, есть ли лучший способ реализовать это, не присваивая класс каждому отдельному элементу HTML.

Ответы

Ответ 1

Я бы использовал ту же технику, но внутри оболочки класса данных, где это необходимо:

.data a, .data span, .data tr, .data td { white-space: pre; }

HTML:

<div class="data">
....

</div>

Ответ 2

<pre>no need for       style</pre>

Ответ 3

Что не так с заменой пробелов на & nbsp;? Это должно работать внутри любого элемента и сохранять пробелы в отображаемом выходе.

Ответ 4

Это зависит от того, хотите ли вы сохранить все пробелы в определенных элементах и ​​что именно должно произойти там. Предполагая, что нет правил CSS, которые могут мешать, ваш CSS можно упростить до

a, span, tr { white-space: pre; }

потому что элемент a всегда находится внутри body и td по умолчанию наследует свойство от tr.

Если вы хотите только предотвратить смятие нескольких пространств, вместо принудительного деления на строки, то white-space: pre-wrap или замена пробелов без пробелов может быть более адекватной.

Наконец, необходимость и возможности ограничения правила для выбранных элементов сильно зависят от того, как следует делать выбор. Возможно, вы можете выборочно установить white-space на pre (или pre-wrap) на некоторые элементы, которые заключают в себе соответствующие части, помня, что свойство наследует, если не установлено на внутренних элементах.

Вы также можете разбить наследование: вы можете установить white-space: pre на элемент table, например, если вы хотите, чтобы правило применялось к большей части содержимого, и установите white-space: normal в эти строки или ячейки, где он не должен применяться.