Як змінити проміжок, щоб він виглядав попередньо за допомогою CSS?

108

Чи можна змінити <span>тег (або <div>), щоб попередньо відформатувати його вміст, як <pre>тег, використовуючи лише CSS?

html css

— сузір'я
джерело

164

Подивіться таблицю стилів W3C CSS2.1 за замовчуванням або робочий проект CSS2.2 . Скопіюйте всі налаштування для PRE і поставте їх у свій клас.

pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}

— Діодей - Джеймс Макфарлейн
джерело

1

Це добре робити так, щоб зрозуміти, звідки беруться ці параметри за замовчуванням.

— Діод - Джеймс Макфарлейн

2

Коли я спробую це, розриви рядків не зберігаються.

— Агнел Куріан

Тег <pre> відображатиме горизонтальні смуги прокрутки, коли текст занадто широкий, але цей css не буде. Хтось знає, як їх показати?

— шиндиго

1

@shindigo Ви намагалися використовувати overflow: scroll? Або якщо ви хочете лише горизонтальну прокрутку overflow-x: scroll developer.mozilla.org/en-US/docs/Web/CSS/overflow

— Kanmuri

1

@shindigo overflow: auto;може бути кращим, інакше ви можете отримати два набори прокрутки, коли вони вам не потрібні.

— Виступ

57

Перегляньте властивість CSS у пробілі .

.like-pre { white-space: pre; }

— Пістолет
джерело

7

або ви можете знайти white-space: pre-wrapкорисне. Він так поводиться pre, але заплітає довгі рядки.

— Кай Карвер

25

Це робить SPAN схожим на PRE:

span {
  white-space: pre;
  font-family: monospace;
  display: block;
}

Не забудьте змінити селектор css за необхідності.

— Містер Блискучий і Новий 安宇
джерело

5

Зокрема, ви шукаєте:

white-space: pre

http://www.quirksmode.org/css/whitespace.html
http://www.w3.org/TR/CSS21/text.html#white-space-prop

— Сорен Куклау
джерело

2

Спробуйте це

span {
    white-space: pre;
    font-family: monospace;
    display: block;
    unicode-bidi: embed
}

— Янні
джерело

1

Спробуйте цей стиль

.pre {

white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
line-height: 1.5;   
word-break: break-all;
white-space: pre;
white-space: pre\9; /* IE7+ */
display: block;
}

Використовується те саме тут - http://www.makemyshop.in/

— Йесу Радж
джерело

0

Чому б не просто використовувати тег <pre>, а не тег span? Обидва вбудовані, тому обидва повинні поводитись так, як хотіли б. Якщо у вас є проблема з перекриттям цілого визначення <pre>, просто дайте йому клас / id.

1

Іноді у вас вже є проміжок сторінки і ви не можете його змінити, як, наприклад, якщо це частина існуючої системи CMS.

— Містер Блискучий та Новий 安宇

B / c фреймворк відмовляється ставити вміст під моїм <pre> так, як я його прошу. Я міг би обійтись, але це набагато важче, ніж просто встановити кілька реквізитів CSS.

— jsight