จะเปลี่ยนช่วงให้ดูเหมือนก่อนด้วย CSS ได้อย่างไร?

108

เป็นไปได้ไหมที่จะเปลี่ยน<span>แท็ก (หรือ<div>) เพื่อจัดรูปแบบเนื้อหาล่วงหน้าเช่น<pre>แท็กจะใช้ CSS เพียงอย่างเดียว

html css

— jsight
แหล่งที่มา

165

ดูที่W3C CSS2.1 แผ่นเริ่มต้นสไตล์หรือร่าง CSS2.2 ทำงาน คัดลอกการตั้งค่าทั้งหมดสำหรับ PRE และใส่ลงในชั้นเรียนของคุณเอง

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

— Diodeus - เจมส์ MacFarlane
แหล่งที่มา

1

เป็นความคิดที่ดีที่จะทำเช่นนี้เพื่อให้เข้าใจว่าค่าเริ่มต้นเหล่านี้มาจากไหน

— Diodeus - James MacFarlane

2

เมื่อฉันลองสิ่งนี้การแบ่งบรรทัดจะไม่ถูกเก็บรักษาไว้

— Agnel Kurian

แท็ก <pre> จะแสดงแถบเลื่อนแนวนอนเมื่อข้อความกว้างเกินไป แต่ css นี้จะไม่แสดง ใครรู้วิธีแสดงให้ดู

— shindigo

1

@shindigo คุณลองใช้overflow: scrollหรือยัง? หรือหากคุณต้องการเพียงผู้overflow-x: scroll พัฒนา

— mozilla.org/en-US/docs/Web/CSS/overflow

1

@shindigo overflow: auto;อาจจะดีกว่ามิฉะนั้นคุณอาจจบลงด้วยแถบเลื่อนสองชุดเมื่อคุณไม่ต้องการ

— Spechal

57

ดูคุณสมบัติ CSS พื้นที่สีขาว

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

— พิสโตส
แหล่งที่มา

7

หรือคุณอาจพบว่าwhite-space: pre-wrapมีประโยชน์ มันทำงานเหมือนpreแต่พันเป็นเส้นยาว

— Kai Carver

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

— Sören Kuklau
แหล่งที่มา

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> แทนแท็กช่วง ทั้งสองอย่างอยู่ในแนวเดียวกันดังนั้นทั้งคู่ควรปฏิบัติตัวในแบบที่คุณต้องการ หากคุณมีปัญหาในการลบล้างนิยามทั้งหมดของ <pre> ให้ระบุคลาส / id

1

บางครั้งคุณมีช่วงบนเพจอยู่แล้วและไม่สามารถเปลี่ยนแปลงได้เช่นถ้าเป็นส่วนหนึ่งของระบบ CMS ที่มีอยู่

— Mr. Shiny and New 安宇

B / c กรอบไม่ยอมใส่เนื้อหาภายใต้ <pre> ของฉันในแบบที่ฉันขอ ฉันสามารถแก้ไขได้ แต่มันยากกว่าการตั้งค่าอุปกรณ์ประกอบฉาก CSS เพียงเล็กน้อย

— jsight