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

Odpowiedzi:

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


źródło
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