جلسه سی و پنجم آموزش CSS : نکات کامل کار با متن ها

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

text-align-last : شما با استفاده از این ویژگی ، نحوه چیدمان آخرین سطر را مشخص می کنید .
text-emphasis : شما با استفاده از این ویژگی ، متن و رنگ تاکید را تنظیم می کنید .
text-overflow : شما با استفاده از این ویژگی ، نحوه مخفی شدن محتوای سر ریز شده را تنظیم می کنید .
word-break : شما با استفاده از این ویژگی ، نحوه شکسته شدن خط و رفتن به سطر بعد را تنظیم می کنید .
word-wrap : شما با استفاده از این ویژگی ، نحوه شکسته شدن کلمه طولانی و رفتن به سطر بعد را تنظیم می کنید .

در ادامه بررسی این موارد می پردازیم .

نحوه کار با ویژگی text-overflow

این ویژگی شما را قادر می سازد تا با استفاده از آن ، به مخاطب بفهمانید که محتوا سر ریز شده است و قسمت سر ریز شده ، مخفی شده است . در ادامه طی مثالی نحوه استفاده از این ویژگی را به شما نشان می دهیم .

<html>
   <head>
   
      <style>
         p.text1 {
            white-space: nowrap; 
            width: 200px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: clip;
         }
         p.text2 {
            white-space: nowrap; 
            width: 200px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: ellipsis;
         }
      </style>
      
   </head>
   <body>
   
      <b>Original Text:</b>
   
      <p>Tutorials Point originated from the idea that there exists a class of 
      readers who respond better to online content and prefer to learn new skills at 
      their own pace from the comforts of their drawing rooms.</p>
      
      <b>Text overflow:clip:</b>
   
      <p class="text1">Tutorials Point originated from the idea that there exists
      a class of readers who respond better to online content and prefer to learn 
      new skills at their own pace from the comforts of their drawing rooms.</p>
      
      <b>Text overflow:ellipsis</b>
   
      <p class="text2">Tutorials Point originated from the idea that there exists
      a class of readers who respond better to online content and prefer to learn
      new skills at their own pace from the comforts of their drawing rooms.</p>
      
   </body>
</html>

حالا نتیجه را ببینید .

نحوه کار با ویژگی word-break

مثال زیر ، نحوه عملکرد این ویژگی را به شما نشان می دهد .

<html>
   <head>
   
      <style>
         p.text1 {
            width: 140px; 
            border: 1px solid #000000;
            word-break: keep-all;
         }
         p.text2 {
            width: 140px; 
            border: 1px solid #000000;
            word-break: break-all;
         }
      </style>
      
   </head>
   <body>
   
      <b>line break at hyphens:</b>
      <p class="text1">Tutorials Point originated from the idea that there exists a class of
      readers who respond better to online content and prefer to learn new skills at
      their own pace from the comforts of their drawing rooms.</p>
      
      <b>line break at any character</b>
   
      <p class="text2">Tutorials Point originated from the idea that there exists a class of 
      readers who respond better to online content and prefer to learn new skills at their
      own pace from the comforts of their drawing rooms.</p>
      
   </body>
</html>

نتیجه را ببینید .

نحوه کار با ویژگی word-wrap

این ویژگی شما را قادر می سازد که کلمات طولانی را شکسته و به سطر بعد بروید . در ادامه نمونه ای از کد نوشته شده بر طبق این دستور را می بینید .

p {
   word-wrap: break-word;
}

خب دوستان عزیز ، این جلسه هم به پایان رسید. موفق و پیروز باشید .

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

جلسه سی و پنجم آموزش CSS : نکات کامل کار با متن ها

نحوه کار با ویژگی text-overflow

نحوه کار با ویژگی word-break

نحوه کار با ویژگی word-wrap

آیا نیاز به مدرک هم دارید؟