CSS Text Effects

ஒரு text-ன் normal-லான பண்புகளை நமது விருப்பம்போல் control செய்ய பயன்படுத்துவதே இந்த text effect properties.

கீழே கொடுக்கபட்டுள்ள property-கள் text effect-க்காக பயன்படுத்தபடுகின்றன.

• text-overflow
• word-wrap
• word-break
• writing-mode

Overflow

text-overflow என்பது ஒரு குறிப்பிட்ட பரப்பை தாண்டி, content வெளியே சென்றால் அது overflow என்று சொல்லபடுகிறது.

overflow:hidden இதை பயன்படுத்தும்போது border-ஐ தாண்டி content செல்லும்போது அவை மறைக்கப்பட்டுவிடும்.

.overflow-hidden-method {
    overflow: hidden;
    width: 200px;
    height: 60px;
    border: 1px solid #000000;
}

overflow:auto இதை பயன்படுத்தும்போது border-ஐ தாண்டி content செல்லும்போது மட்டும் அந்த html element-ல் scroll bar apply செய்யப்பட்டுவிடும். scroll செய்து மறைக்கப்பட்ட மொத்த content-ஐ பார்த்துகொள்ளலாம்.

.overflow-auto-method{
    overflow: auto;
    width: 200px;
    height: 60px;
    border: 1px solid #000000;
}

overflow:scroll இதை பயன்படுத்தும்போது, content border-ஐ தாண்டி சென்றாலும் செல்லாவிடினும் அந்த html element-ல் scroll bar apply செய்யப்பட்டுவிடும். scroll செய்து மறைக்கப்பட்ட மொத்த content-ஐ பார்த்துகொள்ளலாம்.

.overflow-scroll-method{
    overflow: scroll;
    height: 60px;
    width: 200px;
    border: 1px solid #000000;
}

CSS Text Overflow

text ஒரு குறிப்பிட்ட பரப்பை தாண்டி வெளியே செல்லும்போது text-ஆனது எவ்வாறு display செய்யவேண்டும் என்பதை வரையருக்கவே text-overflow property பயன்படுகிறது.

The CSS code is as follows:

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;
}
p.test2 {
    white-space: nowrap; 
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: string;
}

The following example shows how you can display the overflowed content when hovering over the element:

div.test:hover {
    overflow: visible;
    width: 90px;
    border: 1px solid #000000;
}

CSS Word Wrapping

ஒரு text border-ஐ தாண்டி நீண்ட வார்த்தைகளை கொண்டிருந்தால் அதை உடைத்து அடுத்த line-க்கு எடுத்து சென்று border-க்கு உள்ளே அமையுமாறு செய்வதற்கே இந்த word-wrap பயன்படுத்தபடுகிறது.

Example

Allow long words to be able to be broken and wrap onto the next line:

p {
    word-wrap: break-word;
    width: 70px;
    border: 1px solid #000000;
}

CSS Word Breaking

ஒரு text-ல் உள்ள அனைத்து வார்த்தைகளையும் உடைத்து அதுத line-க்கு எடுத்து செல்ல வேண்டுமா வேண்டாமா என்பதை வரையறுக்கவே இந்தword-break பயன்படுத்தபடுகிறது.

The CSS code is as follows:

p.test1 {
    word-break: keep-all;
    width: 70px;
    border: 1px solid #000000;
}
p.test2{
    word-break: break-all;
    width: 70px;
    border: 1px solid #000000;
}

CSS Writing Mode

ஒரு text எவ்வாறு write செய்யவேண்டும். அதாவது horizontal-ஆக write செய்யவேண்டுமா அல்லது vertical-ஆக write செய்யவேண்டுமா என்பதை வரையருக்கவே பயன்படுத்தபடுகிறது.

The following example shows some different writing modes:

p.test1 {
    writing-mode: horizontal-tb; 
}
span.test2 {
writing-mode: vertical-rl; 
}
p.test2 {
    writing-mode: vertical-rl; 
}

text-align-last

ஒரு text-ல் கடைசி line-ன் alignment எவ்வாறு இருக்க வேண்டும் என்பதை வரையறுக்க பயன்படுகிறது.

Example

Align the last line of text in three <div> elements:

div.a {
    text-align: justify;  /* For Edge */
    text-align-last: right;
}
div.b {
    text-align: justify; /* For Edge */
    text-align-last: center;
}
div.c {
    text-align: justify; /* For Edge */
    text-align-last: justify;
}