กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี พื้นหลัง CSS CSS Borders CSS Margins CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline CSS Text แบบอักษร CSS ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients CSS Shadows เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

เอ ฟเฟกต์ข้อความ CSS


CSS Text Overflow, Word Wrap, Line Breaking Rules และโหมดการเขียน

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติดังต่อไปนี้:

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode

CSS Text Overflow

คุณสมบัติ CSS text-overflowระบุว่าเนื้อหาที่ล้นซึ่งไม่ได้แสดงควรส่งสัญญาณไปยังผู้ใช้อย่างไร

สามารถตัดได้:

นี่เป็นข้อความยาวๆ ที่ไม่เข้ากล่อง

หรือสามารถแสดงผลเป็นจุดไข่ปลา (...):

นี่เป็นข้อความยาวๆ ที่ไม่เข้ากล่อง

รหัส CSS มีดังนี้:

ตัวอย่าง

p.test1 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}

ตัวอย่างต่อไปนี้แสดงวิธีการแสดงเนื้อหาที่ล้นเมื่อวางเมาส์เหนือองค์ประกอบ:

ตัวอย่าง

div.test:hover {
  overflow: visible;
}


CSS Word Wrapping

คุณสมบัติ CSS word-wrapช่วยให้สามารถแยกคำที่ยาวและตัดเป็นบรรทัดถัดไปได้ 

หากคำหนึ่งยาวเกินกว่าจะพอดีกับพื้นที่ คำนั้นจะขยายออก:

ย่อหน้านี้ประกอบด้วยคำที่ยาวมาก: thisisaveryveryveryveryveryverylongword คำที่ยาวจะแตกและตัดไปยังบรรทัดถัดไป

คุณสมบัติ word-wrap ช่วยให้คุณสามารถบังคับข้อความให้ตัด - แม้ว่าจะหมายถึงการแยกคำกลางคำ:

ย่อหน้านี้ประกอบด้วยคำที่ยาวมาก: thisisaveryveryveryveryveryverylongword คำที่ยาวจะแตกและตัดไปยังบรรทัดถัดไป

รหัส CSS มีดังนี้:

ตัวอย่าง

ปล่อยให้คำยาวๆ แตกและรวมเป็นบรรทัดถัดไปได้:

p {
  word-wrap: break-word;
}

CSS Word Breaking

คุณสมบัติ CSS word-breakระบุกฎการแบ่งบรรทัด

ย่อหน้านี้ประกอบด้วยข้อความบางส่วน บรรทัดนี้จะทำลายเครื่องหมายยัติภังค์

ย่อหน้านี้ประกอบด้วยข้อความบางส่วน เส้นจะแตกที่อักขระใดก็ได้

รหัส CSS มีดังนี้:

ตัวอย่าง

p.test1 {
  word-break: keep-all;
}

p.test2 {
  word-break: break-all;
}

โหมดการเขียน CSS

คุณสมบัติ CSS writing-modeระบุว่าบรรทัดของข้อความถูกจัดวางในแนวนอนหรือแนวตั้ง

ข้อความบางส่วนที่มีองค์ประกอบช่วงที่มี a แนวตั้ง-rl โหมดการเขียน

ตัวอย่างต่อไปนี้แสดงโหมดการเขียนที่แตกต่างกัน:

ตัวอย่าง

p.test1 {
  writing-mode: horizontal-tb;
}

span.test2 {
  writing-mode: vertical-rl;
}

p.test2 {
  writing-mode: vertical-rl;
}

ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

ระบุว่าเนื้อหาที่ล้นสำหรับองค์ประกอบ <p> ควรส่งสัญญาณด้วยจุดไข่ปลา (...)

<style>
p {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  : ;
}
</style>

<body>
  <p>
    This paragraph contains a very long word: supercalifragilisticexpialidocious.
  </p>
</body>


คุณสมบัติเอฟเฟกต์ข้อความ CSS

ตารางต่อไปนี้แสดงรายการคุณสมบัติเอฟเฟกต์ข้อความ CSS:

Property Description
text-justify Specifies how justified text should be aligned and spaced
text-overflow Specifies how overflowed content that is not displayed should be signaled to the user
word-break Specifies line breaking rules for non-CJK scripts
word-wrap Allows long words to be able to be broken and wrap onto the next line
writing-mode Specifies whether lines of text are laid out horizontally or vertically