Как установить максимальную ширину для всего текста, читаемого человеком (не для таблиц и ct)

#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. Поскольку мой вопрос касался минимального решения, и никто не предложил лучшего, вы выиграли!