ممکنه تا به حال براتون پیش اومده باشه که وقتی دارین یه صفحه وب طراحی می‌کنین، یه دفعه ببینید متنتون از <div> یا کادری که واسش تعیین کردید، بیرون زده. این موضوع ممکنه باعث بشه صفحه شما بهم ریخته بشه و کاربران نتونن به درستی از محتوا استفاده کنن.
یکی از مهم‌ترین دلایلی که این اتفاق میفته می‌تونه مربوط به عدم استفاده صحیح از استایل‌ها باشه. ممکنه که شما نتونسته باشید درست از ویژگی‌های CSS مثل overflow یا white-space بهره بگیرید، که باعث میشه محتوا از مرزهای تعیین‌شده خودشون عبور کنه.
یه دلیل دیگه می‌تونه استفاده از واحدهای نامناسب برای اندازه‌گیری مثل px یا em باشه. این می‌تونه باعث بشه تطابق متنی با ابعاد کادرها به‌درستی انجام نشه. برای مثال، اگر طول بیش از حد برای width تعریف کرده باشید، یا اینکه فواصل داخلی padding به صورت غیر منطقی تنظیم شده باشند.
یه گیر دیگه ممکنه استفاده نادرست از المنت‌های چابک مثل span داخل div باشه که باعث به‌هم‌ریختگی ساختار صفحه میشه. اگر درست از inline و block استفاده نکنید، این مشکل پیش میاد.
حالا بیاید با یه قطعه کد نحوه برطرف کردن این مشکلات رو ببینیم:
<style>
.container {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<div class="container">
این یک متن بلند است که ممکن است از کادر خارج شود با استفاده از CSS.
</div>
در کد بالا چه اتفاقی می‌افته؟
<style> - در این قسمت ما استایل‌های خودمون رو برای div مورد نظر تعریف کردیم.
.container - این کلاس به div مورد نظر اختصاص داده شده.
width: 300px; - عرض این div برابر با 300 پیکسل تنظیم شده. این مقدار رو می‌تونید بر حسب نیاز تغییر بدید.
white-space: nowrap; - از شکسته شدن و رفتن به خط بعد جلوگیری می‌کنه.
overflow: hidden; - مانع از نمایش بخش‌های بیرونی میشه که اون‌ها رو در صفحه نگه می‌داره.
text-overflow: ellipsis; - اگر متن از کادر خارج بشه، به جای نمایش، نقطه‌چین به انتهای متن اضافه می‌کنه تا نشون بده متن ادامه داره.