#html #css
#HTML #css
Вопрос:
В общем, я стараюсь избегать использования каких-либо таблиц стилей и тому подобного. Но есть одна причина настаивать на фиксированном макете. И это максимальная ширина текстовой строки для чтения. Строки, длина которых превышает определенное количество символов, нечитаемы для людей.
Тем не менее, максимальная ширина во всех браузерах и документах W3C по умолчанию равна отображаемой фактической ширине. Это очень раздражает, когда пояснительный текст и очень большие таблицы отображаются в одном окне браузера. Вы установили свой браузер на весь экран (f11 во многих браузерах), и теперь вы больше не можете читать пояснительный текст…
Каков минимальный способ указать, что для <p>
и всех других мест, где появляется простой плавающий текст, установлена максимальная ширина? В настоящее время у меня есть p { max-width: 70ex; }
но есть так много других мест, таких как <li>
Комментарии:
1. Я просто понимаю, что stackoverflow отображает около 110 символов в строке и все еще читаем. Но, похоже, это самый верхний предел..
2. Не уверен, что это хорошая идея. Вы бы отобрали у пользователя контроль в области, где пользователю лучше всего решать. Некоторые люди могут предпочесть иметь более длинные строки текста? Если это не элемент дизайна, я бы оставил его. Кроме того, если вы не настроили таблицу стилей печати, которая переопределяет
max-width
, вы можете заставить людей печатать на большем количестве страниц, чем хотелось бы.3. Мы согласны с тем, что применять это в целом не имеет смысла. Но посмотрите на страницы, подобные ссылке , и посмотрите на страницу в полноэкранном режиме. Редко имеет смысл разрешать такое форматирование по умолчанию.
4. Ваше утверждение о том, что > 80 символов текста «нечитабельны», весьма сомнительно. У меня нет проблем с этим, и я не встречал никого, кроме вас, кто утверждает, что имеет это ограничение. 80 символов были аппаратным ограничением / соглашением 70-х годов, я никогда не слышал, чтобы утверждалось, что это было преднамеренное решение, основанное на человеческом восприятии.
5. @SpliFF: Я удалил спорное число 80 из своего вопроса. Проблема возникает, если у вас очень широкий экран.
Ответ №1:
вы могли бы сделать что-то вроде этого :
a, address, blockquote, caption, cite, code, dd, del,
dfn, li, p, pre, q, td, textarea, th, tt { max-width: 70ex }
специально нет никакого div, иначе это может испортить ваш сайт. вот почему я, вероятно, сделал бы что-то вроде :
.humanText { max-width: 70ex }
и поместите этот класс в свой html-тег
Комментарии:
1. Спасибо! Я полагаю, что есть также dt. Идея состоит в том, чтобы написать html с минимальными накладными расходами. Таким образом, дополнительный класс этого не делает.
2. Поскольку мой вопрос касался минимального решения, и никто не предложил лучшего, вы выиграли!