ویژگی word-break در CSS

word-break Property

ویژگی word-break در CSS مشخص می کند که اگر متنی از حروف “به هم پیوسته” به پایان خط رسید چگونه عمل کند. ادامه پیدا کند یا شکسته و به سطر بعد انتقال پیدا کند.

نحوه نوشتار

word-break: normal; 
word-break: break-all; 
word-break: keep-all;
word-break: break-word;

مقادیر

normal​

از قوانین شکسته شدن خط متنی پیروی می کند. مقدار پیشفرض است.

break-all​

برای جلوگیری از سرریزی متن به بیرون از محدوده عنصر، خط متنی بعد از هر حرف میتواند شکسته شود.

keep-all​

شکستن کلمه نباید برای خطوط چینی، ژاپنی و کره ای اتفاق بیفتد. این مقدار همانند normal عمل می کند.

break-word​

برای جلوگیری از سرریزی محتوا به بیرون از عنصر، کلمه می تواند از هر جایی که لازم باشد اتفاق بیفتد.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="wrapper">
    <div class="break-all">
          <h4>word-break: break-all;</h4>
          Loremipsumdolorsitametconsecteturadipisicingelit. Odio sunt quasi
          facere, quaerat at sint repellat ea quibusdam blanditiis aut illum
          temporibus dicta labore, ipsam commodi impedit error neque
          accusantium.
     </div>
     <div class="normal">
          <h4>word-break: normal;</h4>
          Loremipsumdolorsitametconsecteturadipisicingelit. Odio sunt quasi
          facere, quaerat at sint repellat ea quibusdam blanditiis aut illum
          temporibus dicta labore, ipsam commodi impedit error neque
          accusantium.
     </div>
</div>
<div class="wrapper">
     <div class="break-word">
          <h4>word-break: break-word;</h4>
          Loremipsumdolorsitametconsecteturadipisicingelit. Odio sunt quasi
          facere, quaerat at sint repellat ea quibusdam blanditiis aut illum
          temporibus dicta labore, ipsam commodi impedit error neque
          accusantium.
     </div>
     <div class="keep-all">
          <h4>word-break: keep-all;</h4>
          Loremipsumdolorsitametconsecteturadipisicingelit. Odio sunt quasi
          facere, quaerat at sint repellat ea quibusdam blanditiis aut illum
          temporibus dicta labore, ipsam commodi impedit error neque
          accusantium.
     </div>
</div>

css

h4 {
    margin: 5px;
    text-align: center;
    color: blue;
}
.wrapper {
    display: flex;
    font: normal 15px consolas;
}
.wrapper div {
    background-color: #d7d7d7;
    margin: 1%;
    max-width: 210px;
}
.normal {
    word-break: normal;
    color: green;
}
.break-all {
    word-break: break-all; 
}
.keep-all {
    word-break: keep-all;
    color: red;
}
.break-word {
    word-break: break-word; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.