Google chrome перенос строк

Обновлено: 04.07.2024

Крис Ли (Chris Lee) — бывший дизайнер Google — рассказал, как и почему поисковый гигант в своё время отказался от дизайна мобильного браузера Chrome, напоминавшего то, что показала Apple для мобильной версии Safari.

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

В случае Google такое решение называлось Chrome Home — многие могут помнить его по достаточно кратковременному внедрению в браузер несколько лет назад. Именно Ли создал концепцию этого дизайна и активно продвигал его в Google в 2016 году. Как рассказывает Ли, идея обрела популярность внутри компании. Однако последующие бета-тесты показали неоднозначную реакцию.

Оказалось, что более технически грамотные пользователи Android приняли нововведение очень хорошо, однако для большинства обычных пользователей такое изменение стало слишком значительным, что приводило к дезориентации.

Chrome обслуживает миллиарды пользователей по всему миру с различной технической грамотностью. В ходе многих итераций я всё больше убеждался, что запуск Chrome Home не удовлетворит всех наших пользователей. Так же, как я решительно предлагал первоначальную концепцию, я выступал за то, чтобы мы остановили запуск, что потребовало немалых споров.

Chrome Home — это урок для меня и всей команды Chrome о намерениях, необходимых для внедрения инноваций в рамках крупномасштабного продукта. Кто-то может возразить, что нам никогда не следовало пробовать подобное; другие могут сказать, что мы должны были довести это до конца. Я придерживаюсь подхода, который использовал здесь: смело пытайтесь, но будьте готовы выслушивать пользователей и задавать вопросы самому себе.

Подытоживает Ли свои воспоминания тем, что Safari в iOS 15 основан на подобных идеях, так что к этому шагу Apple может быть много замечаний.

Функция переноса строки теперь доступна в настольной версии браузера Google Chrome и Microsoft Edge. Он дает вам возможность увидеть исходный код любой веб-страницы, которую вы хотите. Другими словами, вы можете сказать, что эта функция позволяет использовать опцию переноса строки при проверке исходного кода веб-страницы.

Обычная проблема, с которой сталкиваются пользователи при просмотре веб-страницы, заключается в том, что она не помещается в окне. Это не ошибка, необходимо использовать только правильные функции, такие визуальные проблемы могут быть решены с помощью переноса строк. Это функция на основе HTML, которая улучшает визуальное восприятие.

Включение и отключение переноса строк в режиме просмотра исходного кода в Chrome или Edge

Чтобы включить функцию переноса строк в Google Chrome и Microsoft Edge, следуйте приведенным ниже советам:

Откройте Google Chrome или Microsoft Edge.
Перейдите на веб-страницу, на которой вы хотите включить эту функцию.
Щелкните веб-страницу правой кнопкой мыши и выберите параметр «Просмотр источника страницы».
В окне исходного кода страницы просмотра установите флажок Перенос строки.

Давайте теперь посмотрим на них подробнее:

Для начала откройте браузер, в котором вы хотите включить функцию переноса строк. Откройте Microsoft Edge или Google Chrome и найдите любую веб-страницу или окно, в которое хотите внести изменения.

Затем нажмите сочетание клавиш Ctrl + U, чтобы напрямую открыть вкладку исходного кода. Также можно щелкнуть веб-страницу правой кнопкой мыши и выбрать параметр «Просмотр источника страницы».

Внутри окна просмотра страницы исходного кода отметьте перенос строки. Теперь ваша веб-страница не будет переполнять текстовые строки. Перезапустите браузер.

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

Отключить перенос строки в представлении исходного кода в Edge и Chrome

Хотя указанные выше изменения не являются постоянными и автоматически исчезнут при выключении источника. Перенос строк можно отключить вручную так же, как он был включен. Вот процедура:

Откройте Google Chrome или Microsoft Edge.
Перейдите на веб-страницу, на которой вы хотите отключить эту функцию.
Нажмите сочетание клавиш Ctrl + U, чтобы просмотреть фактический код.
Снимите флажок Перенос строки.

Запустите браузер Microsoft Edge или Google Chrome. Затем откройте веб-страницу, на которой вы хотите отключить функцию переноса строки. На веб-странице щелкните правой кнопкой мыши и выберите параметр «Просмотр источника страницы». Затем просто снимите флажок с параметра Перенос строки, и все готово.

Релевантный ответ Релевантные ответы ( 0 )

Наша автоматическая система анализирует ответы и выбирает тот, который с наибольшей вероятностью поможет решить проблему. Наша автоматическая система анализирует ответы и выбирает тот, который с наибольшей вероятностью поможет решить проблему. Если он оказывается полезным, мы помечаем его как "Рекомендованный ответ". 2) в настройках "configure" поставил галочку напротив "Wrap Text" - yes На зарубежных форумах пишут, что в версии Chrome 87.0.4280.141 перенос строк не работает и будет работать в следующем обновлении. Наша автоматическая система анализирует ответы и выбирает тот, который с наибольшей вероятностью поможет решить проблему. Если он оказывается полезным, мы помечаем его как "Рекомендованный ответ".

Вопрос заблокирован. Ответить на него невозможно.

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

Добавить или удалить ссылку

We found the following personal information in your message:

This information will be visible to anyone who visits or subscribes to notifications for this post. Are you sure you want to continue?

Сейчас уведомления отключены и вы не получаете электронные письма о новых записях. Чтобы включить их, откройте свой профиль и перейдите в настройки уведомлений . Компания Google очень серьезно относится к неправомерному использованию своих сервисов. Мы рассматриваем подобные нарушения в соответствии с законодательством вашей страны. Получив вашу жалобу, мы изучим ее и примем необходимые меры. Мы свяжемся с вами только в том случае, если потребуется дополнительная информация или появятся интересующие вас сведения.

Если вам нужно, чтобы тот или иной контент был изменен согласно действующему законодательству, воспользуйтесь этим инструментом.

Запись не относится к теме, посвящена сторонним продуктам, написана в неуважительной форме или содержит персональную информацию. Запись содержит домогательства, дискриминационные высказывания, изображение наготы, вредоносный, противозаконный, сексуальный или рекламный контент или ее автор выдает себя за другое лицо. Компания Google очень серьезно относится к неправомерному использованию своих сервисов. Мы рассматриваем подобные нарушения в соответствии с законодательством вашей страны. Получив вашу жалобу, мы изучим ее и примем необходимые меры. Мы свяжемся с вами только в том случае, если потребуется дополнительная информация или появятся интересующие вас сведения.

Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение метилпропенилендигидроксициннаменилакрилическая кислота очень похожа на некоторых людей с « подвывертом »! Не знаем, как справляться с такими трудными личностями, но реализовать перенос текста CSS точно поможет.

Зачем переносить «непереносимое»

В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью « переезжает » на следующую строчку.

Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет « выглядеть » на клиентской стороне трудно, поэтому задавать переносы « вручную » бессмысленно:

Решаем проблему переноса слов с помощью HTML

Перед тем, как рассмотреть CSS перенос слов , изучим возможности решения этой проблемы с помощью языка гипертекста.
Для этого в HTML имеется несколько вариантов:

В некоторых браузерах поддержка тега <wbr> реализована некорректно. В них он будет работать, если для него в коде CSS прописано свойство display со значением inline-block.

Как реализовать CSS перенос слов

Перед тем, как реализовать CSS перенос слов , давайте рассмотрим несколько свойств, способных разрешить основную проблему:

word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:

Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:

normal – слова не переносятся;
break-word – автоматический перенос слов;
inherit – наследование значения родителя.

Пример, иллюстрирующий применение этого свойства:

В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:

Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать того чтобы реализовать CSS перенос слов .

word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.

Свойство принимает три значения:

normal – используются правила переноса, установленные по умолчанию;
word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.

hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:

none – отключает CSS перенос слов;
manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега <wbr> или мягкого переноса () ;
auto – браузер автоматически переносит слова на основе своих настроек.

Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:

Как реализовать запрет переноса слов CSS

Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет использовать CSS перенос слов можно реализовать несколькими способами:

С помощью неразрывного пробела &nbsp , который устанавливается в местах переноса строки или слов;
Задав свойству white-space значение « nowrap » ( white-space: nowrap ).

Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.

Читайте также: