நீள்வட்டத்தைச் சேர்த்து உயரத்தின்படி ஒற்றை அல்லது பல வரி உரையை டிரிம் செய்தல். CSS Css ஐப் பயன்படுத்தி ஒரு வரியின் முடிவில் மூன்று புள்ளிகள் இறுதியில் மூன்று புள்ளிகள்

தயாரிப்பு இணைப்புகளின் நீண்ட பெயர்கள் - ஒவ்வொன்றும் மூன்று வரிகள் - அல்லது மற்ற தொகுதிகளின் நீண்ட தலைப்புகள் சில நேரங்களில் எவ்வளவு எரிச்சலூட்டும். இந்த முழு விஷயத்தையும் எப்படியாவது சுருக்கி, இன்னும் கச்சிதமாக மாற்றினால் எவ்வளவு நன்றாக இருக்கும். நீங்கள் அதன் மேல் சுட்டியை செலுத்தினால், தலைப்பை முழுமையாகக் காட்டுங்கள்.

இதற்கு, நமக்கு பிடித்த CSS உதவிக்கு வரும். இது மிகவும் எளிமையானது, பாருங்கள்.

தயாரிப்பு பட்டியலிலிருந்து இதுபோன்ற ஒரு தொகுதி எங்களிடம் உள்ளது என்று வைத்துக்கொள்வோம்:

அதன் அமைப்பு இதோ:

ஒரு சூப்பர் விலையில் ஒரு அற்புதமான தயாரிப்பு, 100 ரூபிள் மட்டுமே. அது உங்களின் தனிமையான மாலைப் பொழுதை பிரகாசமாக்கி, உங்களுக்கு உயிர்ச்சக்தியை அளிக்கும்!

அவரது பாணிகள் இங்கே:

ஒப்புக்கொள், அது பயங்கரமானது. நிச்சயமாக, நீங்கள் தயாரிப்பு பெயரை சுருக்கலாம். ஆனால் நூற்றுக்கணக்கான அல்லது ஆயிரக்கணக்கானவை இருந்தால் என்ன செய்வது? பெயரின் ஒரு பகுதியைக் குறைக்க PHPஐப் பயன்படுத்தலாம், குறிப்பிட்ட எண்ணிக்கையிலான எழுத்துகளுக்குக் கட்டுப்படுத்தலாம். ஆனால் தளவமைப்பு பின்னர் மாறினால் மற்றும் தொகுதிகள் சிறியதாக இருந்தால் அல்லது அதற்கு மாறாக 2-3 மடங்கு பெரியதாக இருந்தால் என்ன செய்வது? இதில் எதுவுமே விருப்பம் இல்லை, இது எதுவுமே நமக்குப் பொருந்தாது.

இங்கே CSS மற்றும் அதன் மாயாஜால சொத்து எங்கள் உதவிக்கு வருகிறது உரை வழிதல். ஆனால் இது பல பண்புகளுடன் இணைந்து சரியாகப் பயன்படுத்தப்பட வேண்டும். கீழே நான் உங்களுக்கு ஒரு ஆயத்த தீர்வைக் காண்பிப்பேன், அதன் பிறகு என்னவென்று விளக்குகிறேன்.

எனவே, தயாரிப்புப் பெயர்களை கைமுறையாக எடிட்டிங் செய்வதையும், ஸ்டைல்களின் புரோகிராமிக் க்ராப்பிங்கையும் ஒதுக்கி வைத்துவிட்டு, CSSஐ நம் கைகளில் எடுத்துக்கொண்டு, நமக்கு என்ன கிடைக்கிறது என்பதைப் பார்க்கிறோம்:

அதிசயம் Yudo மாலை சக்தி கொடுப்பவர், மர்மமான, கலை. 20255-59

சரி, இது சிறந்ததா? என் கருத்துப்படி, மிகவும்! தலைப்பின் மேல் உங்கள் சுட்டியை நகர்த்தவும்... voila! இங்கே அது முழுமையாக நமக்குக் காட்டப்படுகிறது.

எங்கள் கட்டமைப்பில் எதுவும் மாறவில்லை, நான் ஒரு திவாவை ஒரு வகுப்பில் சேர்த்தேன் .தலைப்புதலைப்பு குறிச்சொல். இதோ புதிய, மேம்படுத்தப்பட்ட ஸ்டைல்கள்:

Someblock(எல்லை: 1px திடமான #cccccc; விளிம்பு: 15px தானியங்கு; திணிப்பு: 10px; அகலம்: 250px; ) .தலைப்பு (எல்லை-கீழ்: 1px கோடு; எழுத்துரு அளவு: 16px; எழுத்துரு-எடை: தடிமன்; விளிம்பு-கீழ்: 12px: 12px ; வழிதல்: மறைக்கப்பட்டது; உரை-வழிதல்: நீள்வட்டம்; வெள்ளை-வெளி: நவ்ராப்; )

நாங்கள் என்ன செய்தோம் என்று பாருங்கள்:

தொகுதியில் ஒரு சொத்தை சேர்த்துள்ளோம் white-space: nowrap, இது வார்த்தைகளை மடக்கும் உரையின் திறனை நீக்குகிறது புதிய கோடு, அதன் மூலம் அதை ஒரு கோட்டிற்கு இழுக்கிறது;
பிறகு சொத்து சேர்த்தோம் வழிதல் மறைத்து, இது எங்கள் வரியின் தெரிவுநிலையை தொகுதியின் அகலத்திற்கு மட்டுப்படுத்தியது, இதன் மூலம் தேவையற்ற அனைத்தையும் துண்டித்து, பார்வையாளருக்குக் காட்டவில்லை;
சரி, இறுதியில் சொத்தைப் பயன்படுத்தி எங்கள் வரியில் ஒரு நீள்வட்டத்தைச் சேர்த்துள்ளோம் text-overflow: ellipsis, இதன் மூலம் பார்வையாளருக்கு இது வரிசையின் முடிவு அல்ல என்பதையும், அவர்கள் தங்கள் சுட்டியை உயர்த்தி அதை முழுமையாக பார்க்க வேண்டும் என்பதையும் புரிந்து கொள்ள அனுமதிக்கிறது.

CSS ஐ விரும்புங்கள், CSS ஐக் கற்றுக் கொள்ளுங்கள், மேலும் இணையதளத்தை உருவாக்குவது உங்களுக்கு கடினமாகத் தோன்றாது =)

சில உரைகளை ஒரு வரியில் காட்ட வேண்டியிருக்கும் போது பலர் சிக்கலை எதிர்கொண்டிருக்கலாம். மேலும், உரை மிகவும் நீளமாக இருக்கலாம், மேலும் இந்த உரை அமைந்துள்ள தொகுதியின் அகலம் பொதுவாக உலாவி சாளரத்தின் அதே அளவிற்கு வரையறுக்கப்பட்டுள்ளது. இந்த நிகழ்வுகளுக்கு, உரை-ஓவர்ஃப்ளோ பண்பு கண்டுபிடிக்கப்பட்டது, இது CSS3 பரிந்துரையில் சேர்க்கப்பட்டுள்ளது, மேலும் மிக நீண்ட காலத்திற்கு முன்பு IE6 இல் முதலில் செயல்படுத்தப்பட்டது. ஒரு தொகுதிக்கு இந்த சொத்தை பயன்படுத்தும் போது, அதன் உரை தொகுதியை விட அகலமாக இருந்தால், உரை துண்டிக்கப்பட்டு இறுதியில் ஒரு நீள்வட்டம் வைக்கப்படும். இங்கே எல்லாம் அவ்வளவு எளிதல்ல என்றாலும், சிறிது நேரம் கழித்து இதற்குத் திரும்புவோம்.
இன்டர்நெட் எக்ஸ்புளோரரில் எல்லாம் தெளிவாக உள்ளது, மற்ற உலாவிகளைப் பற்றி என்ன? மேலும் CSS3 விவரக்குறிப்பிலிருந்து டெக்ஸ்ட்-ஓவர்ஃப்ளோ பண்பு தற்போது விலக்கப்பட்டிருந்தாலும், சஃபாரி அதை ஆதரிக்கிறது (இதன்படி குறைந்தபட்சம், பதிப்பு 3 இல்), ஓபராவும் (பதிப்பு 9 முதல், சொத்து -o-ஓவர்ஃப்ளோ-டெக்ஸ்ட் என்று அழைக்கப்படுகிறது). ஆனால் பயர்பாக்ஸ் ஆதரிக்கவில்லை, அது ஆதரிக்காது, பதிப்பு 3 இல் கூட அது இருக்காது. வருத்தம் ஆனால் உண்மை. ஆனால் ஏதாவது செய்ய முடியுமா?

நிச்சயமாக, அதை செய்ய முடியும். இந்தச் சொத்தை, பயர்பாக்ஸில் எப்படிச் செய்வது என்று இணையத்தில் தேடிக்கொண்டிருந்தபோது, எனக்குக் கிடைத்தது எளிய தீர்வு. தீர்வின் சாராம்சம்:

அவ்வளவுதான். விவரங்களுக்கு கட்டுரையைப் படியுங்கள்.
தீர்வு மோசமாக இல்லை, ஆனால் சிக்கல்கள் உள்ளன:

கடிதத்தின் நடுவில் (ஒப்பீட்டளவில் பேசும்) உரை துண்டிக்கப்படலாம், மேலும் அதன் "ஸ்டம்பை" பார்ப்போம்.

தொகுதியின் அகலத்தை விட உரை சிறியதாக இருந்தாலும், நீள்வட்டம் எப்போதும் காட்டப்படும் (அதாவது, அது அதிலிருந்து வெளியேறாது மற்றும் நீள்வட்டம் தேவையில்லை).

முதல் படி

முதலில் இரண்டாவது பிரச்சனையில் கவனம் செலுத்துவோம், அதாவது தேவையில்லாத போது எலிப்சிஸ் காட்டப்படுவதைத் தவிர்ப்பது எப்படி. என் மூளையை வளைத்து, "கொஞ்சம்" பரிசோதனை செய்த பிறகு, நான் ஒரு தீர்வைக் கண்டேன். நான் விளக்க முயற்சிக்கிறேன்.
விஷயம் என்னவென்றால், ஒரு நீள்வட்டத்துடன் கூடிய ஒரு தனி தொகுதி நமக்குத் தேவை, அது உரை அகலத்தில் அதிக இடத்தை எடுக்கும் போது மட்டுமே தோன்றும். பின்னர் நான் விழுந்த மிதக்கும் தொகுதியின் யோசனையுடன் வந்தேன். இது பயமாகத் தோன்றினாலும், இது எப்போதும் இருக்கும் மற்றும் வலதுபுறமாக அழுத்தும் ஒரு தொகுதி என்று பொருள்படும், ஆனால் உரையின் அகலம் பெரிதாகும்போது, உரை அடுத்த வரியில் தொகுதியைத் தள்ளும்.
பயிற்சிக்கு செல்லலாம், இல்லையெனில் விளக்குவது கடினம். அமைக்கலாம் HTML அமைப்பு:

மிக நீண்ட உரை

மிகவும் கச்சிதமாக இல்லை, ஆனால் என்னால் சிறிய எதையும் செய்ய முடியவில்லை. எனவே, எங்களிடம் ஒரு கொள்கலன் தொகுதி DIV.ellipsis உள்ளது, எங்கள் உரையுடன் ஒரு தொகுதி மற்றும் நீள்வட்டத்தைக் கொண்டிருக்கும் மற்றொரு தொகுதி. "நீள்வட்ட தொகுதி" உண்மையில் காலியாக உள்ளது என்பதை நினைவில் கொள்க, ஏனெனில் நாம் உரையை நகலெடுக்கும் போது கூடுதல் மூன்று புள்ளிகள் தேவையில்லை. மேலும், கூடுதல் வகுப்புகள் இல்லாததால் பயப்பட வேண்டாம், ஏனெனில் இந்த அமைப்பு CSS தேர்வாளர்களைப் பயன்படுத்தி நன்கு கவனிக்கப்படுகிறது. இங்கே CSS தானே:

.நீள்வட்டம் (ஓவர்ஃப்ளோ: மறைக்கப்பட்ட; வெள்ளை-வெளி: நவ்ராப்; கோடு-உயரம்: 1.2எம்; உயரம்: 1.2எம்; பார்டர்: 1பிக்சல் திட சிவப்பு; ) .நீள்வட்டம் > DIV:முதல்-குழந்தை ( மிதவை: இடது; + DIV ( மிதவை: வலது; விளிம்பு-மேல்: -1.2em; ).நீள்வட்டம் >

அவ்வளவுதான். பயர்பாக்ஸ், ஓபரா, சஃபாரி போன்றவற்றில் இது செயல்படுகிறதா என்பதை நாங்கள் சரிபார்த்து உறுதிசெய்கிறோம். IE இல் மிகவும் விசித்திரமான, ஆனால் கணிக்கக்கூடிய முடிவு உள்ளது. IE6 இல் எல்லாம் போய்விட்டது, ஆனால் IE7 இல் அது வேலை செய்யாது, ஏனெனில் இது உருவாக்கப்பட்ட உள்ளடக்கத்தை ஆதரிக்காது. ஆனால் நாங்கள் பின்னர் IE க்கு வருவோம்.

இப்போதைக்கு நாம் என்ன செய்தோம் என்று பார்ப்போம். முதலில், பிரதான தொகுதியின் வரி-உயரம் மற்றும் உயரத்தை அமைக்கிறோம், ஏனெனில் தொகுதியின் உயரம் மற்றும் உரை வரியின் உயரத்தை நாம் அறிந்து கொள்ள வேண்டும். ஒரு நீள்வட்டத்துடன் தொகுதியின் விளிம்பு மேல் அதே மதிப்பை அமைக்கிறோம், ஆனால் எதிர்மறை மதிப்புடன். எனவே, தொகுதி அடுத்த வரிக்கு "மீட்டமைக்கப்படவில்லை" என்றால், அது உரை வரிக்கு (ஒரு வரி) மேலே இருக்கும், அது மீட்டமைக்கப்படும் போது, அது அதன் மட்டத்தில் இருக்கும் (உண்மையில், அது குறைவாக உள்ளது, நாங்கள் அதை இழுக்கிறோம். ஒரு வரி வரை). தேவையற்ற விஷயங்களை மறைக்க, குறிப்பாக நீள்வட்டத்தைக் காட்ட வேண்டிய அவசியம் இல்லாதபோது, நாங்கள் வழிதல் செய்கிறோம்: முக்கிய தொகுதிக்கு மறைக்கப்பட்டுள்ளது, எனவே நீள்வட்டம் கோட்டிற்கு மேலே இருக்கும்போது, அது காட்டப்படாது. தொகுதிக்கு வெளியே (வலது விளிம்பில்) விழும் உரையை அகற்றவும் இது அனுமதிக்கிறது. உரையை எதிர்பாராத விதமாக மடக்குவதைத் தடுக்க மற்றும் நீள்வட்டத்துடன் பிளாக் தள்ளுவதைத் தடுக்க, நாங்கள் வெள்ளை இடத்தை உருவாக்குகிறோம்: நவ்ராப், அதன் மூலம் ஹைபன்களைத் தடைசெய்கிறது - எங்கள் உரை எப்போதும் ஒரே வரியில் இருக்கும். உரையுடன் கூடிய தொகுதிக்கு, மிதவையை அமைக்கிறோம்: இடதுபுறம், அது உடனடியாக நீள்வட்டத்துடன் தொகுதியை சரி செய்யாது மற்றும் குறைந்தபட்ச அகலத்தை எடுக்கும். பிரதான தொகுதியின் உள்ளே (DIV.ellipsis) இரண்டு தொகுதிகளும் மிதப்பதால் (மிதவை: இடது/வலது), உரைத் தொகுதி காலியாக இருக்கும்போது பிரதான தொகுதி சரிந்துவிடும், எனவே பிரதான தொகுதிக்கு நாம் நிலையான உயரத்தை (உயரம்: 1.2em) அமைத்துள்ளோம். . கடைசியாக, நீள்வட்டத்தைக் காட்ட ::ஆஃப்டர் போலி-உறுப்பைப் பயன்படுத்துகிறோம். இந்த போலி உறுப்புக்கு, அதன் கீழ் தோன்றும் உரையை மறைக்க ஒரு பின்னணியையும் அமைக்கிறோம். தொகுதியின் பரிமாணங்களைக் காண பிரதான தொகுதிக்கு ஒரு சட்டத்தை அமைத்துள்ளோம்; பின்னர் அதை அகற்றுவோம்.
ஃபயர்பாக்ஸ் போலி உறுப்புகள் மற்றும் ஓபரா மற்றும் சஃபாரி போன்றவற்றை அவற்றின் நிலைப்பாட்டின் அடிப்படையில் ஆதரித்தால் (அவற்றுக்கான நிலை / மிதவை போன்றவை), நீள்வட்டங்களுக்கு ஒரு தனி தொகுதியைப் பயன்படுத்தாமல் இருக்க முடியும். கடைசி 3 விதிகளை பின்வருவனவற்றுடன் மாற்ற முயற்சிக்கவும்:

.ellipsis > DIV:first-child::after ( மிதவை: வலது; உள்ளடக்கம்: "..."; விளிம்பு-மேல்: -1.2em; பின்னணி-நிறம்: வெள்ளை; நிலை: உறவினர்; )

ஓபரா மற்றும் சஃபாரியில், எல்லாம் முன்பு போலவே செயல்படும், மேலும் கூடுதல் நீள்வட்ட தொகுதி இல்லாமல். ஆனால் பயர்பாக்ஸ் ஏமாற்றம் அளிக்கிறது. ஆனால் அவருக்காகத்தான் நாங்கள் முடிவெடுக்கிறோம். சரி, நீங்கள் அசல் HTML கட்டமைப்பை செய்ய வேண்டும்.

படி இரண்டு

நீங்கள் கவனித்திருக்கலாம், ஒரு தொகுதியில் உரை பொருந்தும்போது நீள்வட்டங்கள் தோன்றும் சிக்கலை நாங்கள் அகற்றினோம். இருப்பினும், எங்களுக்கு இன்னும் ஒரு சிக்கல் உள்ளது - எழுத்துக்களின் நடுவில் உரை துண்டிக்கப்பட்டுள்ளது. தவிர, இது IE இல் வேலை செய்யாது. இரண்டையும் கடக்க, நீங்கள் உலாவிகளுக்கான சொந்த உரை-வழிதல் விதியைப் பயன்படுத்த வேண்டும், மேலும் Firefox க்கு மட்டுமே மேலே விவரிக்கப்பட்ட தீர்வைப் பயன்படுத்தவும் (மாற்றீடு இல்லை). "Firefox க்கு மட்டும்" என்ற தீர்வை எவ்வாறு உருவாக்குவது என்பதை நாங்கள் பின்னர் கண்டுபிடிப்போம், ஆனால் இப்போது நம்மிடம் உள்ளதை டெக்ஸ்ட்-ஓவர்ஃப்ளோவைப் பயன்படுத்தி வேலை செய்ய முயற்சிப்போம். CSS ஐ மாற்றியமைப்போம்:

.நீள்வட்டம் (ஓவர்ஃப்ளோ: மறைக்கப்பட்ட; வெள்ளை-வெளி: நவ்ராப்; கோடு-உயரம்: 1.2எம்; உயரம்: 1.2எம்; பார்டர்: 1பிக்சல் திட சிவப்பு; உரை வழிதல்: நீள்வட்டம்; -o-text-overflow: ellipsis; அகலம்: 100%; } .ellipsis * ( காட்சி: இன்லைன்; ) /*.ellipsis > DIV:first-child (float: left; ) .ellipsis > DIV + DIV (float: right; margin-top: -1.2em; ) .ellipsis > DIV + DIV::after (background-color: white; உள்ளடக்கம்: "..."; ) */

அது மாறியது, திருத்துவதற்கு அதிகம் இல்லை. பிரதான தொகுதி பாணியில் மூன்று வரிகள் சேர்க்கப்பட்டுள்ளன. அவற்றில் இரண்டு உரை வழிதல் அடங்கும். உடற்பயிற்சி அகலம் அகலம்: IE க்கு 100% தேவை, இதனால் உரையானது தொகுதியை முடிவிலிக்கு விரிவுபடுத்தாது, மேலும் உரை-நிரம்பி வழியும் பண்பு செயல்படுகிறது; அடிப்படையில் நாம் அகலத்தை மட்டுப்படுத்தினோம். கோட்பாட்டில், DIV, அனைத்து தொகுதி கூறுகளையும் போலவே, கொள்கலனின் முழு அகலத்திலும் அகலத்திலும் நீண்டுள்ளது: 100% பயனற்றது மற்றும் தீங்கு விளைவிக்கும், ஆனால் IE க்கு தளவமைப்பில் சிக்கல் உள்ளது, ஏனெனில் கொள்கலன் எப்போதும் உள்ளடக்கத்திற்கு ஏற்றவாறு நீட்டுகிறது, எனவே வேறு வழியில்லை. சில உலாவிகளில் (Safari & Opera) டெக்ஸ்ட் ஓவர்ஃப்ளோ வேலை செய்யாது, ஏனென்றால் உள்ளே ப்ளாக் கூறுகள் இருப்பதால், அனைத்து உள் உறுப்புகளையும் நாங்கள் இன்லைன் செய்துள்ளோம். கடந்த மூன்று விதிகளை நாங்கள் கருத்து தெரிவித்தோம், ஏனெனில் இந்த விஷயத்தில் அவை தேவையில்லை மற்றும் எல்லாவற்றையும் உடைக்க (மோதல்). இந்த விதிகள் Firefox க்கு மட்டுமே தேவைப்படும்.
என்ன கிடைத்தது என்று பார்த்துவிட்டு தொடர்வோம்.

படி மூன்று

ஆரம்பத்தில் குறிப்பிடப்பட்ட பக்கத்தை (நான் இந்த கட்டுரையை எழுதப் போகிறேன்) மீண்டும் ஒருமுறை பார்த்தபோது, ஆர்வத்தின் காரணமாக, ஸ்மார்ட் தொடர்பான யோசனைகளுக்கான கருத்துக்களைப் பார்த்தேன். பயர்பாக்ஸ் மற்றும் IE இல் வேலை செய்யும் மற்றொரு தீர்வைப் பற்றி பேசிய ஒரு கருத்தில் நான் அதைக் கண்டேன் (இந்த நபருக்கு, முதல் கட்டுரையின் ஆசிரியரைப் பொறுத்தவரை, வெளிப்படையாக வேறு உலாவிகள் இல்லை). எனவே, இந்த தீர்வில், ஆசிரியர் இந்த நிகழ்வை (உரை-வழிதல் இல்லாதது) சற்று வித்தியாசமான முறையில் கையாள்கிறார், தேவைப்பட்டால் ஒரு நீள்வட்டத்தை வைக்க வேண்டிய உறுப்புகளுக்கு வழிதல் மற்றும் கீழ்நிலை நிகழ்வுகளுக்கு கையாளுபவர்களை இணைக்கிறார். மோசமாக இல்லை, ஆனால் இந்த தீர்வு மிகவும் விலை உயர்ந்தது என்று எனக்குத் தோன்றுகிறது (வளங்களின் அடிப்படையில்), குறிப்பாக இது ஓரளவு தடுமாற்றமாக இருப்பதால். இருப்பினும், அவர் இதை எவ்வாறு அடைந்தார் என்பதைக் கண்டுபிடிக்கும் போது, அவர் ஒரு சுவாரஸ்யமான விஷயத்தைக் கண்டார், அதாவது CSS பண்புகள் o -moz-பைண்டிங். நான் புரிந்து கொண்டவரை, இது IE இல் நடத்தையின் அனலாக் ஆகும், வேறு சாஸ் மற்றும் கூலருடன் மட்டுமே. ஆனால் நாங்கள் விவரங்களுக்கு செல்ல மாட்டோம், இந்த வழியில் நீங்கள் ஒரு ஜாவாஸ்கிரிப்ட் ஹேண்ட்லரை ஒரு உறுப்புடன் இணைக்கலாம் என்று சொல்லலாம். CSS ஐப் பயன்படுத்துகிறது. இது விசித்திரமாகத் தெரிகிறது, ஆனால் அது வேலை செய்கிறது. நாம் என்ன செய்து கொண்டிருக்கின்றோம்:

.எலிப்சிஸ் ( வழிதல் ; -moz-பைண்டிங்: url(moz_fix.xml#ellipsis); பெரிதாக்கு: 1;. ellipsis * ( காட்சி: இன்லைன்; ) .moz-ellipsis > DIV:முதல்-குழந்தை( மிதவை: இடது; காட்சி: தொகுதி; } .moz-ellipsis > DIV + DIV( மிதவை: வலது; விளிம்பு-மேல்: -1.2em; காட்சி: தொகுதி; } .moz-ellipsis > DIV + DIV::after(பின்னணி நிறம்: வெள்ளை; உள்ளடக்கம்: "..."; )

நீங்கள் பார்க்க முடியும் என, நாங்கள் மீண்டும் பல மாற்றங்களைச் செய்யவில்லை. IE7 இல் இந்த கட்டத்தில் ஒரு விசித்திரமான தடுமாற்றம் உள்ளது, நீங்கள் பெரிதாக்கு அமைக்கவில்லை என்றால் எல்லாம் வளைந்திருக்கும்: 1 பிரதான தொகுதிக்கு (எளிமையான விருப்பம்). .ellipsis * அல்லது .moz-ellipsis > DIV + DIV (IE7ஐப் பாதிக்காது) என்ற விதியை நீக்கினால் (நீக்கினால், கருத்துத் தெரிவிக்கவும்), பின்னர் தடுமாற்றம் மறைந்துவிடும். இது எல்லாம் விசித்திரமானது, யாருக்காவது தவறு தெரிந்தால், எனக்கு தெரியப்படுத்துங்கள். இப்போதைக்கு, ஜூம்: 1ஐப் பயன்படுத்தி பயர்பாக்ஸுக்குச் செல்வோம்.
-moz-பைண்டிங் பண்பில் moz_fix.xml கோப்பு, அடையாளங்காட்டி நீள்வட்டத்துடன் கூடிய அறிவுறுத்தல் உள்ளது. இதன் உள்ளடக்கம் xml கோப்புபின்வருபவை:

இந்த கன்ஸ்ட்ரக்டர் செய்யும் அனைத்தும், தேர்வாளர் பணிபுரிந்த உறுப்பில் moz-ellipsis வகுப்பைச் சேர்ப்பதுதான். இது பயர்பாக்ஸில் (கெக்கோ உலாவிகள்?) மட்டுமே வேலை செய்யும், எனவே அதில் மட்டுமே moz-ellipsis வகுப்பு உறுப்புகளில் சேர்க்கப்படும், மேலும் நாம் சேர்க்கலாம். கூடுதல் விதிகள். அதைத்தான் அவர்கள் விரும்பினார்கள். this.style.mozBinding = “” இன் தேவை பற்றி எனக்கு முழுமையாகத் தெரியவில்லை, ஆனால் வெளிப்பாட்டின் அனுபவத்திலிருந்து, பாதுகாப்பான பக்கத்தில் இருப்பது நல்லது (பொதுவாக, பயர்பாக்ஸின் இந்தப் பக்கத்தை நான் அதிகம் அறிந்திருக்கவில்லை. நான் தவறாக இருக்கலாம்).
இந்த நுட்பம் பொதுவாக வெளிப்புற கோப்பு மற்றும் ஜாவாஸ்கிரிப்டைப் பயன்படுத்துகிறது என்று நீங்கள் கவலைப்படலாம். பயப்பட வேண்டிய அவசியம் இல்லை. முதலாவதாக, கோப்பு ஏற்றப்படாவிட்டால் மற்றும்/அல்லது ஜாவாஸ்கிரிப்ட் முடக்கப்பட்டு வேலை செய்யவில்லை என்றால், பரவாயில்லை, பயனர் முடிவில் நீள்வட்டத்தைக் காண மாட்டார், தொகுதியின் முடிவில் உரை துண்டிக்கப்படும். அதாவது, இந்த விஷயத்தில் நாம் ஒரு "கட்டுப்பாடற்ற" தீர்வு கிடைக்கும். நீங்களே பார்க்கலாம்.

எனவே, ஓபரா, சஃபாரி & IE ஆகியவற்றிற்கான உரை-ஓவர்ஃப்ளோவைச் செயல்படுத்தும் "பிக் ஃபோர்" உலாவிகளுக்கு ஒரு பாணியைப் பெற்றுள்ளோம், மேலும் பயர்பாக்ஸுக்கு அதைப் பின்பற்றுகிறது, நன்றாக இல்லை, ஆனால் இது எதையும் விட சிறந்தது.

படி நான்கு

இந்த புள்ளிக்கு முற்றுப்புள்ளி வைக்கலாம், ஆனால் எங்கள் தீர்வை சிறிது மேம்படுத்த விரும்புகிறோம். எந்தவொரு தொகுதியிலும் நாம் ஒரு கட்டமைப்பாளரை இணைக்க முடியும், அதன்படி, அதன் மீது கட்டுப்பாட்டைப் பெற முடியும் என்பதால், இதை ஏன் பயன்படுத்திக் கொள்ளக்கூடாது. எங்கள் கட்டமைப்பை எளிதாக்குவோம்:

மிக நீண்ட உரை

ஓ ஆமாம்! நீங்கள் என்னுடன் உடன்படுவீர்கள் என்று நினைக்கிறேன் - இதுதான் உங்களுக்குத் தேவை!
இப்போது தேவையற்ற அனைத்தையும் பாணியிலிருந்து அகற்றுவோம்:

.நீள்வட்டம் (ஓவர்ஃப்ளோ: மறைக்கப்பட்ட; வெள்ளை-வெளி: நவ்ராப்; கோடு-உயரம்: 1.2எம்; உயரம்: 1.2எம்; உரை-ஓவர்ஃப்ளோ: நீள்வட்டம்; -ஓ-டெக்ஸ்ட்-ஓவர்ஃப்ளோ: நீள்வட்டம்; அகலம்: 100%; -மோஸ்-பைண்டிங்: url(moz_fix.xml#ellipsis); .moz-ellipsis > DIV:first-child (float: left; ) .moz-ellipsis > DIV + DIV (float: right; margin-top: -1.2em; ) .moz -நீள்வட்டம் > DIV + DIV::after (பின்னணி-நிறம்: வெள்ளை; உள்ளடக்கம்: "..."; )

நாங்கள் இறுதியாக சிவப்பு எல்லையை அகற்றிவிட்டோம் :)
இப்போது, எங்கள் moz_fix.xml இல் சிறிது சேர்ப்போம்:

இங்கே என்ன நடந்து கொண்டிருக்கின்றது? எங்கள் ஆரம்ப HTML கட்டமைப்பை மீண்டும் உருவாக்குகிறோம். அதாவது, பிளாக்குகளுடனான அந்த சிரமங்கள் தானாகவே செய்யப்படுகின்றன, மேலும் பயர்பாக்ஸில் மட்டுமே. ஜாவாஸ்கிரிப்ட் குறியீடு சிறந்த மரபுகளில் எழுதப்பட்டுள்ளது :)
துரதிர்ஷ்டவசமாக, கடிதத்தின் நடுவில் உரை துண்டிக்கப்படும் சூழ்நிலையை எங்களால் தவிர்க்க முடியாது (இருப்பினும், தற்காலிகமாக, எனது தீர்வு இன்னும் கசப்பானதாக இருப்பதால், அது எதிர்காலத்தில் வேலை செய்யக்கூடும்). ஆனால் இந்த விளைவை நாம் கொஞ்சம் மென்மையாக்கலாம். இதைச் செய்ய, நமக்கு ஒரு படம் தேவை (வெளிப்படையான சாய்வு கொண்ட வெள்ளை பின்னணி), மற்றும் பாணியில் சில மாற்றங்கள்:

.moz-ellipsis > DIV:first-child (float: left; விளிம்பு-வலது: -26px;) .moz-ellipsis > DIV + DIV ( மிதவை: வலது; விளிம்பு-மேல்: -1.2em; பின்னணி: url(ellipsis.png) மீண்டும்-ஒய்; திணிப்பு-இடது: 26px; }

வாழ்க்கையைப் பார்த்து மகிழ்வோம்.

இதற்கு முற்றுப்புள்ளி வைப்போம்.

முடிவுரை

மூன்றாம் தரப்பு தளவமைப்புக்கு ஒரு சிறிய உதாரணம் தருகிறேன். நான் விக்கிபீடியா பக்கங்களில் ஒன்றின் உள்ளடக்க அட்டவணையை எடுத்து (முதலில் வந்தது) மேலே விவரிக்கப்பட்ட முறையைப் பயன்படுத்தினேன்.
பொதுவாக இந்த முடிவுஒரு நீட்டிப்புடன் மட்டுமே உலகளாவிய என்று அழைக்க முடியும். இது அனைத்தும் உங்கள் தளவமைப்பு மற்றும் அதன் சிக்கலான தன்மையைப் பொறுத்தது. உங்களுக்கு ஒரு கோப்பு தேவைப்படலாம் அல்லது ஒரு டம்பூரின் இருக்கலாம். பெரும்பாலான சந்தர்ப்பங்களில், அது வேலை செய்யும் என்று நான் நினைக்கிறேன். பின்னர், உங்களுக்கு இப்போது ஒரு தொடக்க புள்ளி உள்ளது;)
கட்டுரையிலிருந்து சுவாரஸ்யமான மற்றும் பயனுள்ள ஒன்றை நீங்கள் கற்றுக்கொண்டீர்கள் என்று நம்புகிறேன்;) கற்றுக்கொள்ளுங்கள், பரிசோதனை செய்யுங்கள், பகிர்ந்து கொள்ளுங்கள்.
நல்ல அதிர்ஷ்டம்!

நிலையான உயரம் மற்றும் அகலம் கொண்ட தொகுதிக்குள் காட்டப்பட வேண்டிய தன்னிச்சையான நீளத்தின் உரை உள்ளது. இந்த வழக்கில், உரை முழுமையாகப் பொருந்தவில்லை என்றால், கொடுக்கப்பட்ட தொகுதிக்குள் முழுமையாகப் பொருந்தக்கூடிய உரையின் ஒரு பகுதி காட்டப்பட வேண்டும், அதன் பிறகு ஒரு நீள்வட்டம் அமைக்கப்படும்.

இந்த பணி மிகவும் பொதுவானது, ஆனால் அதே நேரத்தில் அது தோன்றும் அளவுக்கு அற்பமானது அல்ல.

CSS இல் ஒற்றை வரி உரைக்கான விருப்பம்

இந்த வழக்கில், நீங்கள் உரை-ஓவர்ஃப்ளோவைப் பயன்படுத்தலாம்: நீள்வட்ட பண்பு. இந்த வழக்கில், கொள்கலன் சொத்து இருக்க வேண்டும் நிரம்பி வழிகிறதுசமமான மறைக்கப்பட்டுள்ளதுஅல்லது கிளிப்

தொகுதி (அகலம்: 250px; வெள்ளை-வெளி: நவ்ராப்; ஓவர்ஃப்ளோ: மறைக்கப்பட்ட; உரை-ஓவர்ஃப்ளோ: நீள்வட்டம்; )

CSS இல் பல வரி உரைக்கான விருப்பம்

மல்டிலைன் உரையை டிரிம் செய்வதற்கான முதல் வழி CSS ஐப் பயன்படுத்துகிறதுபண்புகள் போலி உறுப்புகளைப் பயன்படுத்துகின்றன : முன்மற்றும் : பிறகு. HTML மார்க்அப் மூலம் தொடங்குவோம்

லோரெம் இப்சம் டோலர் சிட் அமெட், கன்செக்டெட்யூயர் அடிபிஸ்சிங் எலிட், செட் டயம் நோனும்மி நிப் யூயிஸ்மோட் டின்சிடுண்ட் யுட் லாரீட் டோலோர் மேக்னா அலிகாம் எரட் வால்ட்பட். உல் வைஸி எனிம் அட் மினிம் வேனியம், க்விஸ் நாஸ்ட்ரட் உடற்பயிற்சிகள் உல்லம்கார்பர் சஸ்சிபிட் லோபோர்டிஸ் நிஸ்ல் யூட் அலிகிப் எக்ஸ் இயா கொமோடோ கான்செக்வாட். Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at Vero eros மற்றும் acumsan et iusto odio dignissim qui blanditumpraesent அனைத்து வசதிகள்.

இப்போது பண்புகள் தங்களை

பெட்டி (ஓவர்ஃப்ளோ: மறைக்கப்பட்ட; உயரம்: 200px; அகலம்: 300px; கோடு-உயரம்: 25px;) .பெட்டி:முன் (உள்ளடக்கம்: ""; மிதவை: இடது; அகலம்: 5px; உயரம்: 200px;) -குழந்தை ( மிதவை: வலது ; அகலம்: 100% ; விளிம்பு-இடது: -5px ; ) .பெட்டி :பின் (உள்ளடக்கம்: "\02026" ; பெட்டி அளவு: உள்ளடக்கம்-பெட்டி ; மிதவை: வலது ; நிலை: உறவினர் ; மேல்: -25px ; இடது: 100% ; அகலம்: 3em ; விளிம்பு-இடது : -3em ; திணிப்பு-வலது (255 , 255 , 255 , 0 ), வெள்ளை 50% , வெள்ளை );)

மற்றொரு வழி நெடுவரிசை-அகலப் பண்புகளைப் பயன்படுத்துவதாகும், இதன் மூலம் பல வரி உரைக்கான நெடுவரிசை அகலத்தை அமைக்கிறோம். இருப்பினும், இந்த முறையைப் பயன்படுத்தும் போது, முடிவில் ஒரு நீள்வட்டத்தை அமைக்க முடியாது. HTML:

பிளாக் (ஓவர்ஃப்ளோ: மறைக்கப்பட்ட; உயரம்: 200px; அகலம்: 300px; ) .block__inner (-webkit-column-width: 150px; -moz-column-width: 150px ; column-width: 150px) 0% உயரம்;

உலாவிகளுக்கான CSS ஐப் பயன்படுத்தி மல்டிலைன் உரையைத் தீர்க்க மூன்றாவது வழி உள்ளது வெப்கிட். அதில் முன்னொட்டுடன் பல குறிப்பிட்ட பண்புகளை நாம் பயன்படுத்த வேண்டும் -வெப்கிட். பிரதானமானது -வெப்கிட்-லைன்-கிளாம்ப் ஆகும், இது ஒரு பிளாக்கில் வெளியீடு செய்ய வேண்டிய வரிகளின் எண்ணிக்கையைக் குறிப்பிட உங்களை அனுமதிக்கிறது. தீர்வு அழகானது ஆனால் வரையறுக்கப்பட்ட உலாவிகளில் அதன் வேலை காரணமாக குறைவாக உள்ளது

பிளாக் (ஓவர்ஃப்ளோ: ஹிட்; டெக்ஸ்ட்-ஓவர்ஃப்ளோ: எலிப்சிஸ்; டிஸ்ப்ளே: -வெப்கிட்-பாக்ஸ்; -வெப்கிட்-லைன்-கிளாம்ப்: 2

JavaScript இல் பல வரி உரைக்கான விருப்பம்

இங்கே கூடுதல் கண்ணுக்குத் தெரியாத தொகுதி பயன்படுத்தப்படுகிறது, அதில் எங்கள் உரை ஆரம்பத்தில் வைக்கப்படுகிறது, அதன் பிறகு இந்த தொகுதியின் உயரம் உயரத்தை விட குறைவாகவோ அல்லது சமமாகவோ மாறும் வரை ஒரு நேரத்தில் ஒரு எழுத்து அகற்றப்படும். விரும்பிய தொகுதி. இறுதியில் உரை அசல் தொகுதிக்கு நகர்த்தப்பட்டது.

var தொகுதி = ஆவணம். querySelector(".block"), text = block. innerHTML, குளோன் = ஆவணம். createElement("div"); குளோன் பாணி. நிலை = "முழுமையான" ; குளோன் பாணி. பார்வை = "மறைக்கப்பட்ட" ; குளோன் பாணி. அகலம் = தொகுதி. கிளையன்ட்அகலம் + "px" ; குளோன் innerHTML = உரை ; ஆவணம். உடல். appendChild(குளோன்); var l = உரை. நீளம் - 1; ஐந்து innerHTML = குளோன். உள் HTML;

இது jQueryக்கான செருகுநிரலைப் போன்றது:

(செயல்பாடு ($) (வார் துண்டிப்பு = செயல்பாடு (எல்) (வார் உரை = எல். உரை (), உயரம் = எல். உயரம் (), குளோன் = எல். குளோன் (); குளோன் . css (( நிலை : "முழுமையான" , visibility : "மறைக்கப்பட்ட" , உயரம் : "தானியங்கு" )); el . பிறகு (குளோன் ); var l = உரை . நீளம் - 1 ; (; l >= 0 && குளோன் . உயரம் () > உயரம் ; -- l ) (குளோன். டெக்ஸ்ட் (உரை. சப்ஸ்ட்ரிங் (0, எல்) + "..."); எல் (இதைத் திருப்பி விடுங்கள். ஒவ்வொன்றும் (செயல்பாடு ()) (துண்டிக்கவும் ($ (இது));)); )(jQuery ));

முழு உரையும் குறிப்பிட்ட பகுதிக்கு பொருந்தவில்லை என்றால், ஒரு தொகுதியில் உள்ள உரையின் தெரிவுநிலை அளவுருக்களை வரையறுக்கிறது. இரண்டு விருப்பங்கள் உள்ளன: உரை துண்டிக்கப்பட்டது; உரை துண்டிக்கப்பட்டு, வரியின் முடிவில் ஒரு நீள்வட்டம் சேர்க்கப்படுகிறது. பிளாக்கின் ஓவர்ஃப்ளோ பண்பை தானாக , ஸ்க்ரோல் அல்லது மறைக்கப்பட்டிருந்தால் டெக்ஸ்ட் ஓவர்ஃப்ளோ வேலை செய்யும்.

சுருக்கமான தகவல்

பதவிகள்

	விளக்கம்	உதாரணமாக
<тип>	மதிப்பின் வகையைக் குறிக்கிறது.	<размер>
ஏ && பி	மதிப்புகள் குறிப்பிடப்பட்ட வரிசையில் வெளியிடப்பட வேண்டும்.	<размер> && <цвет>
A \| பி	முன்மொழியப்பட்டவற்றிலிருந்து (A அல்லது B) ஒரு மதிப்பை மட்டுமே நீங்கள் தேர்ந்தெடுக்க வேண்டும் என்பதைக் குறிக்கிறது.	சாதாரண \| சிறிய தொப்பிகள்
A \|\| பி	ஒவ்வொரு மதிப்பையும் சுயாதீனமாக அல்லது மற்றவர்களுடன் எந்த வரிசையிலும் பயன்படுத்தலாம்.	அகலம் \|\| எண்ணிக்கை
	குழு மதிப்புகள்.	[ பயிர் \|\| குறுக்கு ]
*	பூஜ்ஜியம் அல்லது அதற்கு மேற்பட்ட முறை செய்யவும்.	[,<время>]*
+	ஒன்று அல்லது அதற்கு மேற்பட்ட முறை செய்யவும்.	<число>+
?	குறிப்பிட்ட வகை, சொல் அல்லது குழு விருப்பமானது.	உள்ளீடு?
(A, B)	குறைந்தபட்சம் A ஐ மீண்டும் செய்யவும், ஆனால் B முறைக்கு மேல் இல்லை.	<радиус>{1,4}
#	காற்புள்ளிகளால் பிரிக்கப்பட்ட ஒன்று அல்லது அதற்கு மேற்பட்ட முறை செய்யவும்.	<время>#

மதிப்புகள்

கிளிப் பகுதிக்கு ஏற்றவாறு உரை கிளிப் செய்யப்பட்டுள்ளது. ellipsis உரை துண்டிக்கப்பட்டது மற்றும் வரியின் முடிவில் ஒரு நீள்வட்டம் சேர்க்கப்பட்டது.

உதாரணமாக

உரை வழிதல்

காந்தப்புலம் வானக் கோளத்தின் பெரிய வட்டத்தை அலட்சியமாக குறைக்கிறது, இதில் சுற்றுப்பாதைகளின் விசித்திரங்களும் சாய்வுகளும் அதிகரிக்கும்.

விளைவாக இந்த உதாரணம்படம் காட்டப்பட்டுள்ளது. 1.

அரிசி. 1. உரையின் முடிவில் நீள்வட்டம்

பொருள் மாதிரி

ஒரு பொருள்.style.textOverflow

குறிப்பு

பதிப்பு 11 க்கு முன் Opera -o-text-overflow பண்புகளைப் பயன்படுத்துகிறது.

விவரக்குறிப்பு

ஒவ்வொரு விவரக்குறிப்பு ஒப்புதலின் பல நிலைகளைக் கடந்து செல்கிறது.

பரிந்துரை - விவரக்குறிப்பு W3C ஆல் அங்கீகரிக்கப்பட்டது மற்றும் ஒரு தரமாக பரிந்துரைக்கப்படுகிறது.
வேட்பாளர் பரிந்துரை ( சாத்தியமான பரிந்துரை) - தரநிலைக்கு பொறுப்பான குழு அதன் இலக்குகளை பூர்த்தி செய்வதில் திருப்தி அடைந்துள்ளது, ஆனால் தரநிலையை செயல்படுத்த மேம்பாட்டு சமூகத்தின் உதவி தேவைப்படுகிறது.
முன்மொழியப்பட்ட பரிந்துரை பரிந்துரைக்கப்பட்ட பரிந்துரை) - இந்த கட்டத்தில் ஆவணம் இறுதி ஒப்புதலுக்காக W3C ஆலோசனைக் குழுவிடம் சமர்ப்பிக்கப்பட்டது.
பணி வரைவு - சமூக மதிப்பாய்வுக்காக விவாதிக்கப்பட்டு திருத்தப்பட்ட வரைவின் மிகவும் முதிர்ந்த பதிப்பு.
ஆசிரியர் வரைவு ( தலையங்க வரைவு) - திட்ட ஆசிரியர்களால் மாற்றங்கள் செய்யப்பட்ட பிறகு தரநிலையின் வரைவு பதிப்பு.
வரைவு ( வரைவு விவரக்குறிப்பு) - தரநிலையின் முதல் வரைவு பதிப்பு.