آموزش تکست در CSS3

saber

4 سال پیش

امتیاز دهید post

آموزش تکست در CSS3

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش تکست در CSS3 خواهیم پرداخت.

CSS3 شامل چندین ویژگی اضافی بود که بعداً به آن اضافه می شود.

text-overflow
word-wrap
word-break

ویژگی های متداول زیر در CSS3 وجود دارد –

text-align-last

برای تراز کردن آخرین سطر متن استفاده می شود

text-emphasis

برای تأکید بر متن و رنگ استفاده می شود

text-overflow

مورد استفاده برای تعیین چگونگی سیگنال گذاری محتوای سرریز شده از صفحه نمایش به کاربران

text-overflow

برای شکستن خط بر اساس کلمه استفاده می شود

word-wrap

برای شکستن خط و بسته شدن روی خط بعدی استفاده می شود

text-overflow

ویژگی text-overflow چگونگی سیگنال دهی محتوای سرریز شده به نمایش در آمده را برای کاربران تعیین می کند. نمونه نمونه سرریز متن به شرح زیر نشان داده شده است –

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         p.text1 {
            white-space: nowrap; 
            width: 500px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: clip;
         }
         p.text2 {
            white-space: nowrap; 
            width: 500px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: ellipsis;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
   
      &lt;b&gt;Original Text:&lt;/b&gt;
   
      &lt;p&gt;
         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.
      &lt;/p&gt;
      
      &lt;b&gt;Text overflow:clip:&lt;/b&gt;
   
      &lt;p class = "text1"&gt;
         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.
      &lt;/p&gt;
      
      &lt;b&gt;Text overflow:ellipsis&lt;/b&gt;
   
      &lt;p class = "text2"&gt;
         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.
      &lt;/p&gt;
      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<style>

p.text1 {

white-space: nowrap;

width: 500px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: clip;

}

p.text2 {

white-space: nowrap;

width: 500px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: ellipsis;

}

</style>

</head>

<body>

Original Text:

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.

Text overflow:clip:

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.

Text overflow:ellipsis

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.

</body>

</html>

خروجی به صورت زیر می باشد:

Original Text:
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.

Text overflow:clip
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.

Text overflow:ellipsis
Tutorials Point originated from the idea that there exists a class of readers who respon

Original Text:

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.

Text overflow:clip

Text overflow:ellipsis

Tutorials Point originated from the idea that there exists a class of readers who respon

کلمه شکنی CSS3
برای شکستن خط، کد زیر کد نمونه ای از کلمه شکنی را نشان می دهد

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         p.text1 {
            width: 140px; 
            border: 1px solid #000000;
            word-break: keep-all;
         }
         p.text2 {
            width: 140px; 
            border: 1px solid #000000;
            word-break: break-all;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
   
      &lt;b&gt;line break at hyphens:&lt;/b&gt;
      &lt;p class = "text1"&gt;
         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.
      &lt;/p&gt;
      
      &lt;b&gt;line break at any character&lt;/b&gt;
   
      &lt;p class = "text2"&gt;
         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.
      &lt;/p&gt;
      
   &lt;/body&gt;
&lt;/html&gt;

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

line break at hyphens:

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.

line break at any character

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.

</body>

</html>

خروجی به صورت زیر می باشد:

line break at hyphens:
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.

line break at any character
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.

line break at hyphens:

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.

line break at any character

CSS word wrapping

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

p {
   word-wrap: break-word;
}

p {

word-wrap: break-word;

}

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

نویسنده مطلب saber

آموزش تکست در CSS3

آموزش تکست در CSS3

text-overflow

CSS word wrapping

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

آموزش تکست در CSS3

text-overflow

CSS word wrapping

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه