Jak zmienić zakres, aby wyglądał jak przedwzmacniacz za pomocą CSS?

108

Czy można zmienić <span>tag (lub <div>), aby wstępnie sformatować jego zawartość tak, jak <pre>tag przy użyciu tylko CSS?

html css

— jsight
źródło

164

Spójrz na domyślny arkusz stylów W3C CSS2.1 lub wersję roboczą CSS2.2 . Skopiuj wszystkie ustawienia PRE i umieść je we własnej klasie.

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

— Diodeus - James MacFarlane
źródło

1

Warto zrobić to w ten sposób, aby zrozumieć, skąd pochodzą te wartości domyślne.

— Diodeus - James MacFarlane

2

Kiedy próbuję, podziały wierszy nie są zachowywane.

— Agnel Kurian,

Znacznik <pre> wyświetli poziome paski przewijania, gdy tekst jest zbyt szeroki, ale ten css nie. Czy ktoś wie, jak je pokazać?

— shindigo

1

@shindigo Czy próbowałeś użyć overflow: scroll? Lub jeśli chcesz tylko przewijać w poziomie overflow-x: scroll developer.mozilla.org/en-US/docs/Web/CSS/overflow

— Kanmuri

1

@shindigo overflow: auto;może być lepsze, w przeciwnym razie możesz skończyć z dwoma zestawami pasków przewijania, gdy ich nie potrzebujesz.

— Przemówienie

57

Zobacz właściwość CSS z odstępami .

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

— Pistos
źródło

7

alternatywnie może okazać się white-space: pre-wrapprzydatne. Zachowuje się jak predługie linie, ale zawija.

— Kai Carver

25

To sprawia, że SPAN wygląda jak PRE:

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

Pamiętaj, aby odpowiednio zmienić selektor css.

— Pan Lśniący i Nowy 安宇
źródło

5

W szczególności nieruchomość, na którą patrzysz, to:

white-space: pre

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

— Sören Kuklau
źródło

2

Spróbuj tego

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

— Yanni
źródło

1

Wypróbuj ten styl

.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;
}

Zastosowano to samo tutaj - http://www.makemyshop.in/

— Yesu Raj
źródło

0

Dlaczego nie użyć po prostu tagu <pre> zamiast tagu span? Oba są wbudowane, więc oba powinny zachowywać się tak, jak chcesz. Jeśli masz problem z zastąpieniem całej definicji <pre>, po prostu nadaj jej class / id.

1

Czasami masz już rozpiętość na stronie i nie możesz jej zmienić, na przykład jeśli jest częścią istniejącego systemu CMS.

— Mr. Shiny and New 安宇

B / c framework odmawia umieszczenia treści pod my <pre> tak, jak o to proszę. Mógłbym to obejść, ale to o wiele trudniejsze niż ustawienie kilku właściwości CSS.

— jsight