ویژگی word-break در css

ویژگی word-break در css شکست کلمه به خط بعد در تگ html

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد خاصیت word-break در زبان css توضیحاتی را ارائه نماییم.

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

معرفی و کاربرد ویژگی word-break در زبان طراحی css

به کمک خاصیت word-break می توانیم مشخص کنیم که یک کلمه از محتوای تگ html مربوطه در انتهای خط با شکست به خط بعدی مواجه شود یا خیر.

مقادیر صفت کاربردی word-break در زبان طراحی سی اس اس

صفت word-break که در زبان طراحی CSS3 معرفی شده است، 6 مقدار می پذیرد که عبارتند از:

1. مقدار normal
2. مقدار break-all
3. مقدار keep-all
4. مقدار break-word
5. مقدار initial
6. مقدار inherit

مقدار normal درون خاصیت word-break در زبان css

اگر خاصیت word-break را برای یک عنصر html برابر با مقدار normal قرار دهیم، در حقیقت می خواهیم کلمه مورد نظر در خطوط بر اساس قوانین عادی عناصر html به خط بعد شکسته شوند.

مقدار normal به عنوان مقدار پیش فرض خاصیت word-break محسوب می شود.

[html] div{ word-break: normal; }[/html]

مقدار break-all درون خاصیت word-break در زبان سی اس اس

اگر خاصیت word-break را برای یک عنصر html برابر با مقدار break-all قرار دهیم، در حقیقت می خواهیم عنصر html اگر نیاز بود خط را از وسط کلمه نیز با شکست همراه نماید.

[html] div{ word-break: break-all; }[/html]

مقدار keep-all درون خاصیت word-break در زبان css

اگر خاصیت word-break را برای یک عنصر html برابر با مقدار keep-all قرار دهیم، در حقیقت می خواهیم عنصر html تحت هیچ شرایطی خط را از وسط کلمه با شکست همراه نکند.

[html] div{ word-break: keep-all;}[/html]

مقدار break-word درون خاصیت word-break در زبان سی اس اس

اگر خاصیت word-break را برای یک عنصر html برابر با مقدار break-word قرار دهیم، در حقیقت می خواهیم برای جلوگیری از overflow یا سرریز، کلمه در نقاط دلخواه در خط مربوطه شکسته شود.

[html] div{ word-break: break-word; }[/html]

ویژگی word-break در css شکست کلمه به خط بعد در تگ html

مقدار initial درون خاصیت word-break در زبان css

اگر خاصیت word-break را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت word-break در زبان سی اس اس

اگر خاصیت word-break را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

بررسی خاصیت word-break از نظر نسخه زبان طراحی css

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

بررسی ساختاری خصوصیت word-break در زبان طراحی سی اس اس

عناوین ساختاری خاصیت word-break	وضعیت ساختاری خاصیت word-break
مقدار پیش فرض	normal
قابلیت توارث	دارد
قابلیت تحرک	ندارد
ورژن css صفت	CSS1, renewed in CSS3
سینتکس صفت در جاوا اسکریپت	"object.style.wordBreak="break-all

پشتیبانی مرورگرهای اینترنتی از خاصیت word-break در زبان طراحی css

خاصیت css
word-break	4.0	5.5	15.0	3.1	15.0