استودیو پیراشکی

طراحی و توسعه اپلیکیشن و بازی های اندروید |برنامه نویسی اندروید|ساخت سایت|برنامه نویسی وب|قالب وردپرس|پیراشکی

استودیو پیراشکی |برنامه نویسی اندروید|ساخت سایت|برنامه نویسی وب|قالب وردپرس

قرار دادن سه نقطه در انتهای متن های طولانی با css3
قرار دادن سه نقطه در انتهای متن های طولانی با css3 دوشنبه, ۶ آذر ۱۳۹۶، ۰۲:۲۲ ب.ظ

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



فرض کنیم باکسی داریم که میخواهیم متن انتهای آن سه نقطه بگیرد:

<div class="myBox">این باکس حاوی یک متن خیلی خیلی خیلی خیلی خیلی طولانی است!</div>

حال به کلاس myBox ویژگی های زیر را اضافه می کنیم تا باکس ما متن را نشکند و و در صورت دراز بودن متن و جا نشدن آن، قسمتی از انتهای متن را حذف و به جای آن سه نقطه قرار دهد:

.myBox{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

حتما توجه داشته باشید که باکس ما باید حتما دارای طول مشخصی باشد. یعنی باید ویژگی width را داشته باشد. تا اگر طول متن از این width درازتر باشد، به جای متن اضافی سه نقطه قرار دهد.
نظرات (۰)
هیچ نظری هنوز ثبت نشده است
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
تجدید کد امنیتی
موضوعات
محبوبترین مطالب
پیوندها