021-28423015
021-28423015

متن در CSS3

در css3 ویژگی های جدیدی برای متن ها وجود دارد. در این درس درباره صفات زیر یاد خواهید گرفت :

  • text-overflow
  • word-wrap
  • word-break

اضافات متن

صفت text-overflow در css3 نحوه چگونگی نمایش اضافات نمایش داده نشده متن به کاربر را مشخص می کند.
متن ، هم می تواند بریده شود و هم با نقطه هایی جاافتادگی آن اعلام شود. کدهای این اعمال به شرح زیر است.

مثال :

نمایش متن
p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
}

p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}
مشاهده مثال

 

در مثال زیر نمایش داده شده است که چگونه اضافات نمایش داده نشده را به هنگام اشاره با ماوس نشان دهیم.

مثال :

نمایش تمام متن
div.test:hover {
    text-overflow: inherit;
    overflow: visible;
}
مشاهده مثال

 

بسته بندی کلمات در css3

صفت word-wrap در css3 این امکان را فراهم می کند تا کلماتی که بسیار طولانی هستند ، محدوده محتوا را به هم نزند و به ادامه آن به سطر بعد منتقل شود.
اگر یک کلمه به حدی طولانی باشد که در محدوده محتوا جای نگیرد ، به خارج از محدوده گسترده می شود.
با استفاده از صفت word-wrap کلمه مورد نظر را به اجبار در داخل محدوده نگه می داریم، حتی اگر کلمه به دو قسمت تقسیم شود.

کد های css برای این مورد به شرح زیر می باشد.

مثال :

تنظیم فضای متن
p {
    word-wrap: break-word;
}
مشاهده مثال

 

شکسته شدن کلمات در css3

صفت word-break قواعد شکستن خطوط را مشخص می کند.

کدهای css این مورد به شرح زیر است.

مثال :

سطر بندی کلمات طولانی
p.test1 {
    word-break: keep-all;
}

p.test2 {
    word-break: break-all;
}
مشاهده مثال

 


نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط