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

Question

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

. Сейчас проще всего было бы добавить глобальный класс CSS, например:

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

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

Answer 1

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

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

HTML:

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

</div>

Answer 2

<code><pre>no need for       style

Answer 3

Это зависит от того, хотите ли вы сохранить все пробелы в определенных элементах и ​​что именно должно происходить там.Предполагая, что нет никаких правил 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 в тех строках или ячейках, где оно находитсяне должен применяться.

Answer 4

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