CSS 文本效果

CSS ການຫຼຸດຄະແນນການສະແດງຂໍ້ຄວາມ, ການຫຼຸດຄະແນນການຍົກຜູ້ຄຳ, ກົດລະບຽບການຍົກຜູ້ຄຳ ແລະ ວິທີການຂຽນ

ໃນປະຈຸບັນນີ້ທ່ານຈະຮຽນກ່ຽວກັບປະເພດດັ່ງຕໍ່ມາ:

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

CSS ການຫຼຸດຄະແນນການສະແດງຂໍ້ຄວາມ

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 属性使长文字能够被折断并换到下一行。

如果一个单词太长而无法容纳在一个区域内，它会向外扩展：

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

通过 word-wrap 属性，您可以强制对文本进行换行 - 即使这意味着在词中间将其拆分：

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

CSS 代码如下：

ຕົວຢ່າງ

允许长单词被打断并换行到下一行：

p {
  word-wrap: break-word;
}

ທ່ານຈະທົດລອງດຽວກັນ

CSS 换行规则

CSS word-break 属性指定换行规则。

本段包含一些文本。此行将连字符打断：

This paragraph contains some text. This line will-break-at-hyphens.

本段包含一些文本。这些行将在任何字符处中断：

This paragraph contains some text. The lines will break at any character.

CSS 代码如下：

ຕົວຢ່າງ

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

ທ່ານຈະທົດລອງດຽວກັນ

CSS ການຂຽນ

CSS writing-mode ປະກອບອະທິບາຍວ່າຄຳຂຽນວົງກາຍແມ່ນສະຖານະຍັງພິມຢ່າງສູງຫຼືຕໍ່າ.

ຄຳຂຽນບາງຢ່າງກັບ ປ້ອມ span element ທີ່ມີ vertical-rl writing-mode.

ຕົວຢ່າງລຸ່ມນີ້ສະແດງວ່າບົດບາດທີ່ຕ່າງກັນຂອງການຂຽນ:

ຕົວຢ່າງ

p.test1 {
  writing-mode: horizontal-tb; 
}
span.test2 {
  writing-mode: vertical-rl; 
}
p.test2 {
  writing-mode: vertical-rl; 
}

ທ່ານຈະທົດລອງດຽວກັນ

CSS ການປະຕິບັດຄຳຂຽນ

ຕົວພັນລະບົບ CSS ການປະຕິບັດຄຳຂຽນ:

ລະບົບ Description
text-align-last Specify how to align the last line of text.
text-justify Specify how aligned text should be aligned and spaced.
text-overflow Specify how to present hidden overflow content to the user.
word-break Specify the line break rules for non-CJK scripts.
word-wrap Allow long words to be broken and moved to the next line.
writing-mode Specify whether the specified text line is horizontally or vertically placed.