آموزش ویژگی word-break در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی word-break در CSS با من همراه باشید.

آموزش ویژگی word-break در CSS

Free-Learn

ویژگی word-break در CSS

با استفاده از ویژگی word-break در CSS میتوان نحوه شکسته شدن کلمات ( معمولا کلمات طولانی که بهم چسبیده شده اند ) را به سطرهای بعد، کنترل کرد.

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

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی word-break را در زبان CSS مشاهده نمایید.

امتحان کنید

Free-Learn

جدول مشخصات ویژگی word-break در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض normal
قابل ارث بری دارد | اطلاعات بیشتر
قابل متحرک سازی ندارد | اطلاعات بیشتر
نسخه CSS3
نحوه استفاده در جاوااسکریپت object.style.wordBreak=”break-all”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی word-break در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
word-break ۴٫۰ ۱۵٫۰ ۱۵٫۰ ۹٫۰ ۶٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی word-break در CSS

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

مقدار توضیح
normal پیش فرض – شکستن کلمات توسط مرورگرها مشخص میشود
break-all برای جلوگیری از سَرریز شدن متن، سعی میکنه کلمه به کلمه را بشکند
keep-all سعی میکنه تحت هر شرایطی کلمات رو نگه داره و از شکسته شدن سطر جلوگیری کند
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

  • از مقدار keep-all نباید برای زبان های Chinese ( چینی ) ، Japanese ( ژاپنی ) و Korean ( کره ای ) استفاده نمایید چون نمیتونه سطر رو بشکنه و به جز این ۳ زبان، در بقیه حالت ها رفتارش شبیه به مقدار normal می شود.

Free-Learn

دریافت PDF یا پرینت این مطلب