آموزش جلوه های متنی CSS

سرریز متن متن CSS ، بسته بندی کلمات ، قوانین شکستن خط و حالت نوشتن

در این فصل شما با خواص زیر آشنا خواهید شد:

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

سرریز متن CSS

text-overflowویژگی CSS مشخص می کند که محتوای سرریز شده که نمایش داده نمی شود چگونه باید به کاربر علامت داده شود.

می توان آن را برید:

این چند متن طولانی است که در جعبه نمی گنجد

یا می تواند بصورت بیضی ارائه شود (…):

این چند متن طولانی است که در جعبه نمی گنجد

کد 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;
}

p {
  word-wrap: break-word;
}

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

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

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

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

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