Как отключить горизонтальную прокрутку в предварительном теге HTML

Я пытаюсь отключить горизонтальную прокрутку в предварительном теге HTML

Я пробовал это:

pre {
    height: auto;
    max-height: 500px;
    overflow:hidden;
    background-color: #eeeeee;
}

но он не работает правильно

это выглядит так:

введите описание изображения здесь

Текст продолжайте идти к левому краю. (направление моей html-страницы - RTL справа налево)

Любое предложение?


javascript html jquery css web-frontend
person askm    schedule 21.03.2017    source источник
comment
попробуйте overflow-x   -  person A. L    schedule 21.03.2017
comment
Также вы хотите применить text-align: right;   -  person SrAxi    schedule 21.03.2017

Ответы (3)


arrow_upward
6
arrow_downward

overflow-x: hidden обрезает текст, но не переносит его.

Свойство white-space CSS вместо этого устанавливает, как обрабатываются пробелы внутри элемента; pre-wrap сохраняет последовательности пробелов, строки разбиваются на символы новой строки, на <br> и по мере необходимости для заполнения строчных полей.

pre {
  white-space: pre-wrap;
}

В этой статье содержится много полезной информации о теге pre: https://mediatemple.net/blog/tips/considerations-for-styling-the-pre-tag/

person kashgo    schedule 10.12.2019
comment
Работа! Правильный ответ - person Ghini Antonio; 29.12.2020

arrow_upward
1
arrow_downward

Попробуйте добавить это:

text-align: right !important;
overflow-x: hidden !important;

Также эта статья может быть интересна для вашей работы: https://alfy.me/2014/07/26/lets-talk-about-rtl.html

Надеюсь, это помогло! Хорошая кодировка! ;)

Изменить:

Я объяснюсь.

Добавляя text-align: right !important;, мы заставляем текст быть выровненным по правому краю, поскольку ваш веб-сайт является RTL, это правильный путь.

Добавляя overflow-x: hidden !important;, мы говорим, что не хотим горизонтальной прокрутки.

Оператор !important используется для приоритета этого правила CSS, он используется для переопределения других стилей.

person SrAxi    schedule 21.03.2017
comment
Когда вы начинаете использовать !important, пути назад нет :) Всегда есть способ обойтись без него. - person Morpheus; 21.03.2017
comment
Та же проблема, снова в настоящее время текст продолжает идти к левому краю, я хочу, чтобы текст останавливался на определенном пределе, а затем начинал новую строку. - person askm; 21.03.2017
comment
@ Морфеус Да, конечно. !important;это решение Rambo, но я понял, что @askm должен переопределить стили - person SrAxi; 21.03.2017
comment
@askm Тогда я думаю, что ваш вопрос не был хорошо объяснен или я плохо понял. Если вы хотите, чтобы текст не «касался» края экрана. Поместите текст в контейнер (div) и задайте ему размер и положение, чтобы вы могли его контролировать. Также прочтите статью, которую я дал, она может помочь вам со стилем веб-сайта, который вы хотите создать. Ваше здоровье! - person SrAxi; 21.03.2017

arrow_upward
1
arrow_downward

Ответ находится в этом сообщении: Как обернуть текст в предварительный тег?

pre {
    white-space: pre-wrap; /* Since CSS 2.1 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}
person dripcode    schedule 15.04.2020