เมื่อทำเค้าโครง DivCSS คุณต้องควบคุมข้อความ วันนี้ฉันจะมาแนะนำให้คุณรู้จัก มีคุณสมบัติสี่ประการใน CSS ที่ควบคุมการขึ้นบรรทัดใหม่
1. พื้นที่สีขาว
คุณสามารถรับเอฟเฟกต์ของแท็ก PRE ใน HTML และเอฟเฟกต์ noWrap ของเซลล์ได้
ไวยากรณ์:
white-space : ปกติ ก่อนตอนนี้
ค่า:
ปกติ: ค่าเริ่มต้น วิธีการประมวลผลเริ่มต้น ข้อความจะจัดการการขึ้นบรรทัดใหม่โดยอัตโนมัติ หากถึงขอบเขตคอนเทนเนอร์ เนื้อหาจะไปที่บรรทัดถัดไป
พื้นฐาน: การขึ้นบรรทัดใหม่และอักขระช่องว่างอื่น ๆ จะได้รับการคุ้มครอง ค่านี้ต้องมีการประกาศ IE6+ หรือ !DOCTYPE ว่าเป็นการสนับสนุนโหมดที่เป็นไปตามมาตรฐาน หากการประกาศ !DOCTYPE ไม่ได้ระบุโหมดที่เป็นไปตามมาตรฐาน คุณสามารถใช้แอ็ตทริบิวต์นี้ได้ แต่จะไม่มีผลใดๆ ผลลัพธ์จะเทียบเท่ากับปกติ ดูวัตถุก่อน
nowrap: บังคับให้ข้อความทั้งหมดแสดงบนบรรทัดเดียวกันจนกว่าจะพบจุดสิ้นสุดของข้อความหรือวัตถุ br ดูแอตทริบิวต์ noWrap
แสดงให้เห็น:
ตั้งค่าหรือดึงข้อมูลวิธีจัดการอักขระช่องว่างภายในวัตถุ
อักขระช่องว่าง เช่น บรรทัดใหม่ ช่องว่าง และ TAB จะถูกละเว้นตามค่าเริ่มต้นในเอกสาร HTML เมื่อคุณสมบัตินี้ถูกตั้งค่าเป็นปกติหรือ nowrap คุณสามารถใช้เอนทิตีที่มีชื่อที่ไม่ใช่ช่องว่างเพื่อเพิ่มช่องว่างและองค์ประกอบ br เพื่อเพิ่มตัวแบ่งบรรทัด คุณสมบัตินี้มีผลเช่นเดียวกันกับเนื้อหาที่คุณจัดการโดยใช้ Document Object Model (DOM) เช่นเดียวกับที่เกิดขึ้นกับเนื้อหาที่แสดงโดย IE
คุณสมบัตินี้ใช้ได้กับวัตถุที่ถูกบล็อก
รูปแบบที่เกี่ยวข้อง:
ข้อความล้น
เมื่อรวมเข้ากับช่องว่างแล้ว ไม่จำเป็นต้องเขียนโปรแกรมเพื่อกำหนดความยาวของสตริง คลิกที่นี่เพื่อดูตัวอย่าง
ไวยากรณ์:
text-overflow : คลิปจุดไข่ปลา
ค่า:
คลิป: ค่าเริ่มต้น ไม่แสดงเครื่องหมายการละเว้น (...) แต่เป็นเพียงการครอบตัด
จุดไข่ปลา: แสดงเครื่องหมายจุดไข่ปลา (...) เมื่อข้อความภายในวัตถุล้น
แสดงให้เห็น:
ตั้งค่าหรือดึงข้อมูลว่าจะใช้เครื่องหมายจุดไข่ปลา (...) เพื่อทำเครื่องหมายข้อความที่ล้นภายในออบเจ็กต์หรือไม่
คุณสมบัตินี้ส่งผลต่อการล้นของข้อความตะวันตกปกติในทิศทางอินไลน์แนวนอนเท่านั้น การล้นบรรทัดเกิดขึ้นเมื่อข้อความภายในบรรทัดเกินความกว้างที่มีอยู่โดยไม่มีโอกาสในการตัดคำ
หากต้องการบังคับให้เกิดโอเวอร์โฟลว์และใช้ค่าจุดไข่ปลา ผู้เขียนต้องตั้งค่าคุณสมบัติช่องว่างของวัตถุเป็น nowrap
หากไม่มีโอกาสในการขึ้นบรรทัดใหม่ (เช่น ความกว้างของคอนเทนเนอร์ออบเจ็กต์แคบและมีข้อความยาวโดยไม่มีการขึ้นบรรทัดใหม่) ก็เป็นไปได้ที่จะล้นโดยไม่ต้องใช้ nowrap
หากต้องการใช้ค่าจุดไข่ปลา คุณสมบัตินี้จะต้องตั้งค่าเป็นออบเจ็กต์ที่มีพื้นที่มองไม่เห็น ตัวเลือกที่ดีที่สุดคือการตั้งค่าคุณสมบัติโอเวอร์โฟลว์เป็นซ่อน คุณสมบัตินี้ยังใช้เมื่อตั้งค่าคุณสมบัติโอเวอร์โฟลว์ให้เลื่อนหรืออัตโนมัติ แต่แถบเลื่อนจะปรากฏขึ้น
โดยการเลือกเครื่องหมายละเว้น จะสามารถเลือกข้อความที่ซ่อนได้ เมื่อการเลือกเกิดขึ้น เครื่องหมายจุดไข่ปลาจะถูกซ่อนและแทนที่ด้วยข้อความ
คุณลักษณะนี้ให้วิธีที่มีประสิทธิภาพในการสร้างมาร์กอัปละเว้นใน DHTML
2. การแบ่งคำ
คุณสมบัติที่ใช้บ่อยที่สุดในการควบคุมการตัดบรรทัดมักจะใช้ร่วมกับการตัดคำด้านล่าง
ไวยากรณ์:
word-break: การแบ่งปกติ-ทั้งหมด เก็บทั้งหมด
ค่า:
ปกติ: ค่าเริ่มต้น อนุญาตให้แบ่งบรรทัดระหว่างคำ
แบ่งทั้งหมด: ลักษณะการทำงานนี้จะเหมือนกับปกติสำหรับภาษาเอเชีย อนุญาตให้แบ่งคำในบรรทัดข้อความที่ไม่ใช่ภาษาเอเชียได้เช่นกัน ค่านี้เหมาะสำหรับข้อความภาษาเอเชียที่มีข้อความที่ไม่ใช่ภาษาเอเชีย
Keep-all: เหมือนกับปกติสำหรับภาษาที่ไม่ใช่เอเชียทั้งหมด สำหรับภาษาจีน เกาหลี และญี่ปุ่น ไม่อนุญาตให้ใช้การแบ่งคำ เหมาะสำหรับข้อความที่ไม่ใช่ภาษาเอเชียและมีข้อความภาษาเอเชียจำนวนเล็กน้อย
แสดงให้เห็น:
ตั้งค่าหรือดึงข้อมูลพฤติกรรมการตัดคำสำหรับข้อความภายในออบเจ็กต์ โดยเฉพาะเมื่อมีหลายภาษาปรากฏขึ้น
สำหรับภาษาจีน ควรใช้คำว่า break-all [ตัดหน้า]
3. การตัดคำ
หากหน้าเว็บที่คุณออกแบบไม่สามารถปรับความกว้างได้ คุณต้องตั้งค่าเป็นคำแยก ไม่เช่นนั้นหน้าเว็บอาจถูกเซ
ไวยากรณ์:
word-wrap : แบ่งคำปกติ
ค่า:
ปกติ: ค่าเริ่มต้น อนุญาตให้เนื้อหาขยายเกินขอบเขตคอนเทนเนอร์ที่ระบุ
คำพังทลาย: เนื้อหาจะแตกภายในขอบเขต หากจำเป็น จะมีการแตกคำด้วย
แสดงให้เห็น:
ตั้งค่าหรือดึงข้อมูลว่าจะแบ่งบรรทัดเมื่อบรรทัดปัจจุบันเกินขอบเขตของคอนเทนเนอร์ที่ระบุหรือไม่
คุณสมบัตินี้ใช้ได้กับวัตถุเค้าโครงเท่านั้น เช่น วัตถุบล็อก หากต้องการใช้แอตทริบิวต์นี้สำหรับองค์ประกอบแบบอินไลน์ คุณต้องตั้งค่าแอตทริบิวต์ความสูงหรือความกว้างของวัตถุก่อน หรือตั้งค่าแอตทริบิวต์ตำแหน่งให้เป็นสัมบูรณ์ หรือตั้งค่าแอตทริบิวต์การแสดงผลเป็นบล็อก
4. ล้น, ล้น-x, ล้น-y
นี่ไม่ใช่การควบคุมสไตล์การตัดบรรทัดอย่างเคร่งครัด แต่การตั้งค่าเป็นซ่อนสามารถเสริมข้อบกพร่องของการตัดคำในบางช่วงเวลา ตัวอย่างเช่น คุณต้องการแสดงข้อความเพียงบรรทัดเดียวภายในความกว้างที่จำกัด แต่ความยาวของบรรทัดนี้ ของข้อความเกินความกว้างนี้ เมื่อรวมกับ white-space+text-overflow จะได้ผลลัพธ์ที่ดีกว่า
ไวยากรณ์:
ล้น: เลื่อนซ่อนอัตโนมัติที่มองเห็นได้
ค่า:
มองเห็นได้: ค่าเริ่มต้น ไม่ตัดเนื้อหาหรือเพิ่มแถบเลื่อน หากมีการประกาศค่าเริ่มต้นนี้อย่างชัดเจน วัตถุจะถูกตัดให้เป็นขนาดของหน้าต่างหรือเฟรมที่มีอยู่ และการตั้งค่าแอตทริบิวต์คลิปจะไม่ถูกต้อง
อัตโนมัติ: เนื้อหาออบเจ็กต์จะถูกครอบตัดหรือแถบเลื่อนจะปรากฏขึ้นเมื่อจำเป็น
ซ่อนเร้น: อย่าแสดงเนื้อหาที่เกินขนาดวัตถุ
เลื่อน: แสดงแถบเลื่อนเสมอ
แสดงให้เห็น:
ดึงข้อมูลหรือกำหนดวิธีจัดการเนื้อหาของออบเจ็กต์เมื่อเกินความสูงและความกว้างที่ระบุ
ค่าเริ่มต้นสำหรับออบเจ็กต์ทั้งหมดจะมองเห็นได้ ยกเว้นออบเจ็กต์พื้นที่ข้อความและออบเจ็กต์เนื้อหา โดยที่ค่าเริ่มต้นคืออัตโนมัติ การตั้งค่าคุณสมบัติของวัตถุ textarea ให้ซ่อนไว้จะซ่อนแถบเลื่อน
สำหรับตาราง หากแอตทริบิวต์ table-layout ถูกตั้งค่าเป็นคงที่ วัตถุ td จะสนับสนุนแอตทริบิวต์โอเวอร์โฟลว์ด้วยค่าเริ่มต้นที่ซ่อนไว้ หากตั้งค่าเป็นเลื่อนหรืออัตโนมัติ เนื้อหาที่เกินขนาด td จะถูกตัด หากตั้งค่าเป็นมองเห็นได้ จะทำให้ข้อความพิเศษล้นไปยังเซลล์ทางด้านขวาหรือซ้าย (ขึ้นอยู่กับการตั้งค่าคุณสมบัติทิศทาง)
คุณสมบัตินี้พร้อมใช้งานบนแพลตฟอร์ม MAC ที่เริ่มต้นด้วย IE5
ตั้งแต่ IE6 เป็นต้นไป คุณลักษณะนี้สามารถนำไปใช้กับออบเจ็กต์ html ได้เมื่อคุณระบุโหมดที่เป็นไปตามมาตรฐานโดยใช้การประกาศ !DOCTYPE