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; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.