آموزش text متن در CSS3

در CSS3، چندین خاصیت جدید برای مدیریت متن معرفی شده است. این ویژگی‌ها به شما کمک می‌کنند تا نمایش و ترازبندی متن‌ها را بهبود بخشیده و تجربه کاربری بهتری ایجاد کنید. در ادامه، با text-overflow، word-wrap و word-break آشنا می‌شوید.

1. خاصیت text-overflow (مدیریت سرریز متن)

این خاصیت تعیین می‌کند که متنی که از کادر عنصر خارج می‌شود، چگونه به کاربر نمایش داده شود. دو مقدار رایج برای این خاصیت:

• clip: متن را برش داده و بخشی که در کادر جا نمی‌شود، حذف می‌کند.

• ellipsis: بخش اضافه متن را به سه نقطه (...) تبدیل می‌کند.

                

    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; 
   }

مثال زیر به شما نشان می دهد چگونه می توانید محتوای سرریز شده (overflowed content) را هنگامی که مکان نمای موس روی آن قرار می گیرد, نمایش دهید:

    div.test:hover { 
        text-overflow: inherit; 
        overflow: visible; 
    }

2. خاصیت word-wrap (شکستن کلمات طولانی)

این خاصیت به مرورگر اجازه می‌دهد کلمات طولانی که در یک خط جا نمی‌شوند را بشکند و ادامه آن را در سطر بعدی نمایش دهد.

• مقدار پیش‌فرض: بدون این خاصیت، کلمات طولانی ممکن است از کادر خارج شوند.

• با word-wrap: کلمات به‌طور خودکار در خط بعدی نمایش داده می‌شوند.

  کد CSS آن به شرح زیر می باشد:

  
              p {
                  word-wrap: break-word;
              }            
          

3. خاصیت word-break (شکستن متن)

خاصیت word-break تعیین می‌کند که متن‌ها چگونه در انتهای خط شکسته و به خط بعد منتقل شوند. مقادیر:

• keep-all: مانع شکستن کلمات در انتهای سطر می‌شود (مخصوص زبان‌های آسیای شرقی).

• break-all: اجازه می‌دهد کلمات در هر نقطه‌ای شکسته شده و به خط بعدی منتقل شوند.

کد CSS آن به ترتیب زیر می باشد:

    
    p.test1 { 
        word-break: keep-all; 
    } 
    
    p.test2 { 
        word-break: break-all; 
    }    

خصوصیت های / properties مربوط به متن و نوشته در CSS3: