CSS ile bir aralığı bir ön gibi görünecek şekilde nasıl değiştirebilirim?

108

Yalnızca CSS kullanan bir etiket gibi içeriğini önceden biçimlendirmek için bir <span>etiketi (veya <div>) değiştirmek mümkün müdür <pre>?

html css

— jsight
kaynak

164

Bak W3C CSS2.1 Standart Style Sheet veya CSS2.2 çalışma taslağı . PRE için tüm ayarları kopyalayın ve bunları kendi sınıfınıza yerleştirin.

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

— Diyot - James MacFarlane
kaynak

1

Bu varsayılanların nereden geldiğini anlamak için bu şekilde yapmak iyi bir fikirdir.

— Diodeus - James MacFarlane

2

Bunu denediğimde satır sonları korunmuyor.

— Agnel Kurian

<pre> etiketi, metin çok geniş olduğunda yatay kaydırma çubuklarını görüntüler, ancak bu css göstermez. Onları nasıl göstereceğini bilen var mı?

— shindigo

1

@shindigo kullanmayı denediniz overflow: scrollmi? Veya sadece yatay kaydırmalı overflow-x: scroll developer.mozilla.org/en-US/docs/Web/CSS/overflow

— Kanmuri

1

@shindigo overflow: auto;daha iyi olabilir, aksi takdirde ihtiyacınız olmadığında iki set kaydırma çubuğu elde edebilirsiniz.

— Spechal

57

Bkz white-space CSS özelliği .

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

— Pistos
kaynak

7

alternatif olarak, white-space: pre-wrapyararlı bulabilirsiniz . Gibi davranır pre, ancak uzun satırları sarar.

— Kai Carver

25

Bu, bir SPAN'ın bir PRE gibi görünmesini sağlar:

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

Uygun şekilde css seçiciyi değiştirmeyi unutmayın.

— Bay Parlak ve Yeni 安宇
kaynak

5

Özellikle bakmakta olduğunuz mülk şudur:

white-space: pre

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

— Sören Kuklau
kaynak

2

Bunu dene

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

— Yanni
kaynak

1

Bu stili dene

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

Aynısını burada da kullandı - http://www.makemyshop.in/

— Yesu Raj
kaynak

0

Neden span etiketi yerine <pre> etiketini kullanmıyorsunuz? Her ikisi de satır içi olduğundan her ikisi de istediğiniz şekilde davranmalıdır. <pre> tanımının tamamını geçersiz kılan bir sorununuz varsa, ona bir sınıf / kimlik verin.

1

Bazen bir sayfada zaten bir yayılma alanınız vardır ve mevcut bir CMS sisteminin parçasıymış gibi değiştiremezsiniz.

— Bay Parlak ve Yeni 安宇

B / c çerçeve, içeriği istediğim şekilde <pre> sayfamın altına koymayı reddediyor. Bunun etrafında çalışabilirim, ancak bu sadece birkaç CSS desteği ayarlamaktan çok daha zor.

— jsight