வணக்கம்
நண்பர்களே..! Word wrap என்பதைப் பற்றி நாம் ஏற்கனவே
கேள்விப்பட்டிருப்போம். இது எதற்குப் பயன்படுகிறது.. ஏன் இதைப் பயன்படுத்த
வேண்டும் என்பதை இப்பதிவில் பார்ப்போம்.
வலைத்தள வடிவமைப்பில் முக்கிய பங்காற்றுவது CSS. அந்த CSS
-ல் வரும் ஒரு பண்புதான் Word wrap. இதை நாம் வேர்ட் போன்ற wordprossing
software -லும் பார்த்திருப்போம்.
Word-Wrap என்றால் என்ன?
Word-wrap என்பது வார்த்தைகளை மடக்கி எழுதுவது என்ற பொருளில் வரும். அதாவது நாம் கணினியில் தட்டச்சிடும் வார்த்தைகளை நமது விருப்பத்திற்கேற்றவாறு மடக்கி எழுதுவது. உதாரணமாக எம்.எஸ். வேர்ட், எம்.எஸ்.வேர்ட்பேட் போன்ற word prosser -களில் தட்டச்சிடும்பொழுது பக்கத்தின் முடிவுவரை தட்டச்சிடும் வரிகள் சென்று மீண்டும் அடுத்த வரிக்குத் திரும்பும். இவற்றை நம் விருப்பப்படி முன்னதாகவே நிறுத்தி, அதற்கு அடுத்த வரிக்கு வார்த்தைகளை கொண்டுச் செல்லப் பயன்படும் வசதிதான் Word-Wrap.
இந்தப் படத்தைப் பாருங்கள். இதில் உள்ள Description-ஐ wrap செய்ய வேண்டும். இதற்கு என்ன செய்யலாம்? Word pad, MS-word என்றால் enter கொடுத்துக்கூட வார்த்தைகளை கீழிறக்கிக்கொள்ள முடியும் ஆனால் வலைத்தளத்தில் என்டர் கொடுத்து கீழிறக்குவதற்கான வாய்ப்புகள் குறைவு. அதுவும் வார்ப்புருவில் இவ்வாறு மாற்றத்தை ஏற்படுத்துவது என்பது சிரமம். இதற்கான தீர்வு தருவதுதான் இந்த CSS நிரல்வரிகள். பெரும்பாலான வலைத்தளத்தின் முழு வடிவமைப்பையும் CSS coding கொண்டு மாற்றி அமைக்க முடியும்.
இருக்கவே இருக்கிறது CSS நிரல்வரிகள். கீழ்க்கண்ட நிரல்வரிகளைப் பயன்படுத்தி மேலுள்ள Description வரிகளை word-wrap செய்து இவ்வாறு மாற்றியுள்ளேன்.
இந்தபடத்திலுள்ளதைப் போல Description word-wrap செய்ய பயன்படுத்த CSS நிரல்வரிகள் இதுதான்.
#header .description {
margin-top: 0px;
margin-left: 45px;
max-width:500px;
color: $descriptioncolor;
font-style: italic;
font-size:11px;
text-shadow:0 1px 0 #000;
word-wrap: break-word;
width:20em;
}
சிவப்பு நிறத்திலுள்ள வரிகள்தான் Description-ஐ Word-Wrap செய்யப் பயன்பட்ட CSS நிரல்வரிகள். உங்களுக்கு இதுபற்றிய கூடுதல் தகவல்கள் தெரிந்திருப்பின் கருத்துரையின் மூலம் தெரியப்படுத்துங்கள்..
word-wrap in css style |
Word-Wrap என்றால் என்ன?
Word-wrap என்பது வார்த்தைகளை மடக்கி எழுதுவது என்ற பொருளில் வரும். அதாவது நாம் கணினியில் தட்டச்சிடும் வார்த்தைகளை நமது விருப்பத்திற்கேற்றவாறு மடக்கி எழுதுவது. உதாரணமாக எம்.எஸ். வேர்ட், எம்.எஸ்.வேர்ட்பேட் போன்ற word prosser -களில் தட்டச்சிடும்பொழுது பக்கத்தின் முடிவுவரை தட்டச்சிடும் வரிகள் சென்று மீண்டும் அடுத்த வரிக்குத் திரும்பும். இவற்றை நம் விருப்பப்படி முன்னதாகவே நிறுத்தி, அதற்கு அடுத்த வரிக்கு வார்த்தைகளை கொண்டுச் செல்லப் பயன்படும் வசதிதான் Word-Wrap.
இந்தப் படத்தைப் பாருங்கள். இதில் உள்ள Description-ஐ wrap செய்ய வேண்டும். இதற்கு என்ன செய்யலாம்? Word pad, MS-word என்றால் enter கொடுத்துக்கூட வார்த்தைகளை கீழிறக்கிக்கொள்ள முடியும் ஆனால் வலைத்தளத்தில் என்டர் கொடுத்து கீழிறக்குவதற்கான வாய்ப்புகள் குறைவு. அதுவும் வார்ப்புருவில் இவ்வாறு மாற்றத்தை ஏற்படுத்துவது என்பது சிரமம். இதற்கான தீர்வு தருவதுதான் இந்த CSS நிரல்வரிகள். பெரும்பாலான வலைத்தளத்தின் முழு வடிவமைப்பையும் CSS coding கொண்டு மாற்றி அமைக்க முடியும்.
இருக்கவே இருக்கிறது CSS நிரல்வரிகள். கீழ்க்கண்ட நிரல்வரிகளைப் பயன்படுத்தி மேலுள்ள Description வரிகளை word-wrap செய்து இவ்வாறு மாற்றியுள்ளேன்.
இந்தபடத்திலுள்ளதைப் போல Description word-wrap செய்ய பயன்படுத்த CSS நிரல்வரிகள் இதுதான்.
#header .description {
margin-top: 0px;
margin-left: 45px;
max-width:500px;
color: $descriptioncolor;
font-style: italic;
font-size:11px;
text-shadow:0 1px 0 #000;
word-wrap: break-word;
width:20em;
}
சிவப்பு நிறத்திலுள்ள வரிகள்தான் Description-ஐ Word-Wrap செய்யப் பயன்பட்ட CSS நிரல்வரிகள். உங்களுக்கு இதுபற்றிய கூடுதல் தகவல்கள் தெரிந்திருப்பின் கருத்துரையின் மூலம் தெரியப்படுத்துங்கள்..
No comments:
Post a Comment