سرریز متن متن 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;
}

بسته بندی کلمات CSS

word-wrapویژگی CSS به شما امکان می دهد کلمات طولانی را بشکنید و روی خط بعدی بپیچید.

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

کد CSS به شرح زیر است:

مثال

اجازه دهید کلمات طولانی بتوانند شکسته شوند و روی خط بعدی قرار بگیرند:

p {
  word-wrap: break-word;
}

شکستن کلمات CSS

word-breakویژگی CSS قوانین شکستن خط را مشخص می کند.

کد CSS به شرح زیر است:

مثال

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

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

حالت نوشتن CSS

writing-modeویژگی CSS مشخص می کند که آیا خطوط متن به صورت افقی یا عمودی قرار می گیرند.

برخی از متن ها با عنصر span با a vertical-rl حالت نوشتن

مثال زیر چندین حالت نوشتاری مختلف را نشان می دهد:

مثال

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

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

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

منبع