قرار دادن سه نقطه در انتهای متن های طولانی با css3

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

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

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

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

.myBox{

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

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