ฉันจะตัดข้อความในแท็กล่วงหน้าได้อย่างไร

pre แท็กมีประโยชน์อย่างยิ่งสำหรับบล็อคโค้ดใน HTML และสำหรับการดีบั๊กขณะเขียนสคริปต์ แต่ฉันจะทำให้การตัดคำข้อความแทนที่จะพิมพ์ออกมาหนึ่งบรรทัดยาวได้อย่างไร

คำตอบจากหน้านี้ใน CSS:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

วิธีนี้ใช้งานได้ดีในการตัดข้อความและบำรุงรักษาพื้นที่สีขาวภายในpre-tag:

pre {
    white-space: pre-wrap;
}

ฉันพบว่าการข้ามแท็กล่วงหน้าและใช้ white-space: การพอกล่วงหน้าบน div เป็นวิธีแก้ปัญหาที่ดีกว่า

 <div style="white-space: pre-wrap;">content</div>

รวบรัดที่สุดนี้บังคับให้เนื้อหาห่อภายในของแท็ก "ก่อน" โดยไม่ทำลายคำ ไชโย!

pre {
  white-space: pre-wrap;
  word-break: keep-all
}

ดูตัวอย่างสดที่นี่

นี่คือสิ่งที่ฉันต้องการ มันเก็บคำจากการแตกหัก แต่ได้รับอนุญาตสำหรับความกว้างแบบไดนามิกในพื้นที่ก่อน

word-break: keep-all;

ฉันแนะนำให้ลืม pre และใส่ไว้ใน textarea

การเยื้องของคุณจะยังคงอยู่และรหัสของคุณจะไม่ถูกห่อคำกลางเส้นทางหรืออะไรสักอย่าง

เลือกช่วงข้อความในพื้นที่ข้อความได้ง่ายขึ้นหากคุณต้องการคัดลอกไปยังคลิปบอร์ด

ต่อไปนี้เป็นข้อความที่ตัดตอนมา php ดังนั้นหากคุณไม่ได้อยู่ใน php วิธีที่คุณแพ็คตัวอักษรพิเศษ html จะแตกต่างกันไป

<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>

สำหรับข้อมูลเกี่ยวกับวิธีคัดลอกข้อความไปยังคลิปบอร์ดใน js ดูที่: ฉันจะคัดลอกไปยังคลิปบอร์ดใน JavaScript ได้อย่างไร .

อย่างไรก็ตาม ...

ฉันเพิ่งตรวจสอบบล็อคโค้ดสแต็คโอเวอร์โฟลว์และพวกมันห่อในแท็ก <code> ที่ห่อด้วยแท็ก <pre> ด้วย css ...

code {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  margin-bottom: 10px;
  max-height: 600px;
  overflow: auto;
  padding: 5px;
  width: auto;
}

นอกจากนี้เนื้อหาของบล็อกรหัส StackOverflow ที่เป็นไฮไลต์ไวยากรณ์ใช้ (ฉันคิด) http://code.google.com/p/google-code-prettify/

มันเป็นการตั้งค่าที่ดี แต่ฉันเพิ่งจะไปกับ textareas ในตอนนี้

ฉันรวม @richelectron และ @ user1433454 คำตอบ
มันทำงานได้ดีมากและรักษารูปแบบข้อความ

<pre  style="white-space: pre-wrap; word-break: keep-all;">

</pre>

คุณสามารถ:

pre { white-space: normal; }

เพื่อรักษาแบบอักษร monospace แต่เพิ่ม word-wrap หรือ:

pre { overflow: auto; }

ซึ่งจะทำให้ขนาดคงที่พร้อมการเลื่อนในแนวนอนสำหรับสายยาว

ลองใช้ดู

<pre style="white-space:normal;">. 

หรือดีกว่าโยน CSS

ใช้white-space: pre-wrapและนำหน้าบางส่วนสำหรับการแบ่งบรรทัดอัตโนมัติภายในpres

อย่าใช้word-wrap: break-wordเพราะเพียงแค่นี้แบ่งคำครึ่งหนึ่งซึ่งอาจเป็นสิ่งที่คุณไม่ต้องการ

วิธีที่ดีที่สุดในการข้ามเบราว์เซอร์ทำงานให้ฉันได้รับการแบ่งบรรทัดและแสดงรหัสหรือข้อความที่ถูกต้อง: (chrome, Internet explorer, Firefox)

CSS:

xmp{ white-space:pre-wrap; word-wrap:break-word; }

HTML:

<xmp> your text or code </xmp>

ต่อไปนี้ช่วยฉัน:

pre {
    white-space: normal;
    word-wrap: break-word;
}

ขอบคุณ

<pre>องค์ประกอบย่อมาจาก "ก่อนจัดรูปแบบข้อความ" และมีวัตถุประสงค์เพื่อให้การจัดรูปแบบของข้อความ (หรืออะไรก็ตาม) ระหว่างแท็กของมัน ดังนั้นจึงไม่จำเป็นต้องมีการตัดคำอัตโนมัติหรือแบ่งบรรทัดภายใน<pre>-Tag

ข้อความในองค์ประกอบที่จะปรากฏในตัวอักษรความกว้างคงที่ (มักจะ Courier) และมันจะเก็บรักษาทั้งพื้นที่และแบ่งสาย

ที่มา: w3schools.comเน้นทำด้วยตัวเอง