CSS overflow ელიფსისი. ელიფსისი ხაზის ბოლოს CSS– ის გამოყენებით

ბევრ ადამიანს, ალბათ, შეექმნა პრობლემა, როდესაც ზოგიერთი ტექსტის ჩვენება საჭიროა ერთ სტრიქონზე. ამ შემთხვევაში, ტექსტი შეიძლება იყოს საკმაოდ გრძელი და ბლოკის სიგანე, რომელშიც მდებარეობს ეს ტექსტი, ჩვეულებრივ შეზღუდულია, ბრაუზერის ფანჯრის იგივე ზომით მაინც. ამ შემთხვევებისთვის გამოიგონეს ტექსტის გადატვირთვის თვისება, რომელიც შეტანილ იქნა CSS3 რეკომენდაციაში და პირველად განხორციელდა IE6– ში, დიდი ხნის წინ. თუ ეს თვისება გამოიყენება ბლოკისთვის, თუ მისი ტექსტი უფრო ფართოა, ვიდრე თავად ბლოკი, მაშინ ტექსტი წყდება და ბოლოს ელისფსიას ემატება. მართალია აქ ყველაფერი ასე მარტივად არ არის, მაგრამ ამას ცოტა მოგვიანებით დავუბრუნდებით.
Internet Explorer- ით "ყველაფერი გასაგებია, რაც შეეხება სხვა ბრაუზერებს? და მიუხედავად იმისა, რომ ტექსტის გადავსების თვისება ამჟამად გამორიცხულია CSS3 სპეციფიკაციიდან, Safari მხარს უჭერს მას (მინიმუმ 3 ვერსიაში), Opera აკეთებს ამას (9 წლიდან) ვერსია, მართალია თვისებას უწოდებენ -o-overflow-text). მაგრამ Firefox არ უჭერს მხარს, არ უჭერს მხარს და ვერსი 3-შიც კი. სამწუხაროა, მაგრამ სიმართლე. მაგრამ შეგიძლია რამე გააკეთო?

რა თქმა უნდა, ამის გაკეთება შეგიძლია. როდესაც ინტერნეტში ვეძებდი ამ ქონებას და როგორც Firefox– ს, მარტივი გამოსავალიც დამხვდა. ამოხსნის არსი:

Სულ ეს არის. წაიკითხეთ დეტალები სტატიაში.
გამოსავალი არ არის ცუდი, მაგრამ არსებობს პრობლემები:

1. ტექსტის შეწყვეტა შესაძლებელია წერილის შუაში (შედარებით ლაპარაკით) და ჩვენ ვნახავთ მის „შტამპს“.
2. ელიფსისი ყოველთვის აისახება, მაშინაც კი, როდესაც ტექსტი ბლოკის სიგანეზე მცირეა (ესე იგი იგი არ ამოვარდება და ელიფსები არ არის საჭირო).

Პირველი ნაბიჯი

პირველ რიგში, ყურადღება გავამახვილოთ მეორე საკითხზე, რომელიც არის ის, თუ როგორ ავიცილოთ თავიდან ელიფსისის ჩვენება, როდესაც ეს არ არის საჭირო. ჩემი თავის გატეხვისა და "ცოტა" ექსპერიმენტის შემდეგ გამოსავალი ვიპოვნე. ვეცდები ახსნა.
დასკვნა არის ის, რომ გვჭირდება ცალკეული ბლოკი ელიფსებით, რომელიც გამოჩნდება მხოლოდ მაშინ, როდესაც ტექსტი სიგანეზე ძალიან ბევრ ადგილს დაიკავებს. შემდეგ მე მივიღე იდეა ნაგავსაყრელი მცურავი ბლოკის შესახებ. მიუხედავად იმისა, რომ საშინლად ჟღერს, ეს მხოლოდ ბლოკს ნიშნავს, რომელიც ყოველთვის არის და მარჯვნივ არის დაჭერილი, მაგრამ როდესაც ტექსტის სიგანე დიდი ხდება, ტექსტი ბლოკს შემდეგი სტრიქონისკენ უბიძგებს.
გადავიდეთ პრაქტიკაზე, თორემ ამის ახსნა ძნელია. მოდით დავაყენოთ HTML სტრუქტურა:

ძალიან გრძელი ტექსტი

არც ისე კომპაქტურია, მაგრამ მეტს ვერაფერს გავხდი. ასე რომ, ჩვენ გვაქვს DIV.ellipsis ბლოკის კონტეინერი, ბლოკი ჩვენი ტექსტით და კიდევ ერთი ბლოკი, რომელიც შეიცავს ელიფსსს. გაითვალისწინეთ, რომ "ბლოკი ელიფსებით" სინამდვილეში ცარიელია, რადგან ტექსტის კოპირებისას არ გვჭირდება დამატებითი სამი წერტილი. ასევე, ნუ შეგაშინებთ დამატებითი კლასების არარსებობა, რადგან ამ სტრუქტურას კარგად მიმართავენ CSS სელექტორების საშუალებით. აქ არის CSS თავად:

ელიფსისი (გადავსება: დამალული; თეთრი სივრცე: ახლახანს; ხაზის სიმაღლე: 1,2 em; სიმაღლე: 1,2 em; საზღვარი: 1px მყარი წითელი;) .ellipsis\u003e DIV: პირველი ბავშვი (float: მარცხენა;) .ellipsis\u003e DIV + DIV (float: მარჯვენა; margin-top: -1.2em;) .ellipsis\u003e

Სულ ეს არის. ჩვენ ვამოწმებთ და დარწმუნდებით, რომ Firefox, Opera, Safari– ში ის მუშაობს ისე, როგორც დანიშნულია. IE– ში შედეგი ძალიან უცნაურია, მაგრამ პროგნოზირებადია. IE6– ში ყველაფერი არასწორად მოხდა, და IE7– ში ის უბრალოდ არ მუშაობს, რადგან არ უჭერს მხარს გამომუშავებულ შინაარსს. მოგვიანებით ჩვენ დავუბრუნდებით IE- ს.

ამასობაში გავაანალიზოთ რა გაკეთდა. პირველ რიგში, ჩვენ დავაყენეთ ძირითადი ყუთის ხაზის სიმაღლე და სიმაღლე, რადგან უნდა ვიცოდეთ უჯრის სიმაღლე და ტექსტის ხაზის სიმაღლე. ჩვენ დავაყენეთ იგივე მნიშვნელობა ელიფსისის ბლოკის ზღვრის ზედა ნაწილისთვის, მაგრამ უარყოფითი მნიშვნელობით. ამრიგად, როდესაც ბლოკი არ არის "ჩამოშლილი" შემდეგ სტრიქონზე, ის იქნება ტექსტის ხაზის ზემოთ (ერთი სტრიქონით), როდესაც ის გადატვირთულია, ის იქნება მის დონეზე (სინამდვილეში, ის უფრო დაბალია, ჩვენ მხოლოდ ერთი სტრიქონით გავაგრძელებთ). ზედმეტის დასამალად, განსაკუთრებით მაშინ, როდესაც ელიფსის ჩვენება არ დაგვჭირდება, ჩვენ გადავსებას ვაკეთებთ: დამალულია მთავარი ბლოკისთვის, ასე რომ, როდესაც ელიფსია ხაზის ზემოთ, ის არ გამოჩნდება. ეს ასევე საშუალებას გვაძლევს ამოვიღოთ ტექსტი, რომელიც ბლოკის გარეთ მდებარეობს (მარჯვენა კიდეზე). ტექსტის მოულოდნელად გადაფარვისა და ბლოკის ქვედა და ქვედა ელიფსებით დაჭერის თავიდან ასაცილებლად, ჩვენ ვაკეთებთ თეთრ სივრცეს: nowrap, რითაც თავიდან ავიცილებთ დეფისს - ჩვენი ტექსტი ყოველთვის ერთ სტრიქონზე იქნება. ტექსტის ბლოკისთვის ჩვენ ვაყენებთ float: მარცხნივ ისე, რომ იგი მაშინვე არ იშლება ბლოკი ელიფსებით და იკავებს მინიმალურ სიგანეს. მას შემდეგ, რაც ორივე ბლოკი მოძრაობს მთავარ ბლოკში (DIV.ellipsis) (ათწილადი: მარცხნივ / მარჯვნივ), ძირითადი ბლოკი დაიშლება, როდესაც ტექსტიანი ბლოკი ცარიელია, ამიტომ ძირითადი ბლოკისთვის დავაყენეთ ფიქსირებული სიმაღლე (სიმაღლე: 1.2em). დაბოლოს, ელიფსისის საჩვენებლად ვიყენებთ :: after ფსევდოელემენტს. ამ ფსევდოელემენტისთვის ჩვენ ასევე ვადგენთ ტექსტს, რომელიც ემთხვევა მის ქვემოთ მდებარე ტექსტს. ჩვენ ვაყენებთ ჩარჩოს მთავარ ბლოკს, მხოლოდ ბლოკის ზომების სანახავად, მოგვიანებით ამოვიღებთ.
თუ Firefox– მა მხარი დაუჭირა ფსევდოელემენტებს, ისევე როგორც Opera– ს და Safari– ს პოზიციონირების თვალსაზრისით (მათთვის პოზიციის / მოძრაობის დაყენება და ა.შ.), მაშინ შესაძლებელი იქნებოდა ელიფსისისთვის ცალკე ბლოკის გამოყენება. სცადეთ შეცვალოთ ბოლო 3 წესი შემდეგით:

.ellipsis\u003e DIV: first-child :: after (ათწილადი: მარჯვნივ; შინაარსი: "..."; margin-top: -1.2em; ფონის ფერი: თეთრი; პოზიცია: ნათესავი;)

ოპერასა და Safari– ში ყველაფერი მუშაობს ისე, როგორც ადრე და დამატებითი ელიფსისის ბლოკის გარეშე. Firefox იმედგაცრუებულია. მაგრამ სწორედ მისთვის მივიღებთ გადაწყვეტილებას. კარგად - თქვენ უნდა გაითვალისწინოთ ორიგინალი HTML სტრუქტურა.

ნაბიჯი მეორე

როგორც ხედავთ, თავიდან ავიცილეთ ელიფსისის პრობლემა, როდესაც ტექსტი მოთავსდება ბლოკში. ამასთან, კიდევ ერთი პრობლემა გვაქვს - ასოებს შუა ტექსტი აჭრიან. გარდა ამისა, ეს არ მუშაობს IE- ში. ორივეს დასაძლევად, თქვენ უნდა გამოიყენოთ ტექსტის გადატვირთვის ბუნებრივი წესი ბრაუზერებისათვის და მხოლოდ Firefox– ისთვის გამოიყენეთ ზემოთ აღწერილი გამოსავალი (ალტერნატივა არ არსებობს). მოგვიანებით გაერკვევა, თუ როგორ უნდა მოვაწყოთ "მხოლოდ Firefox- ისთვის" ამოხსნა, მაგრამ ახლა მოდით ვცადოთ თუ რა გამოდგება ტექსტის გადავსების გამოყენებით. მოდით შეცვალოთ CSS:

ელიფსისი (გადავსება: დამალული; თეთრი სივრცე: ახლახანს; ხაზის სიმაღლე: 1.2 em; სიმაღლე: 1.2 em; საზღვარი: 1px მყარი წითელი; ტექსტის გადავსება: ელიფსები; -o-text-overflow: ელიფსები; სიგანე: 100%; } .ellipsis * (ჩვენება: inline;) / * .ellipsis\u003e DIV: first-child (float: left;) .ellipsis\u003e DIV + DIV (float: right; margin-top: -1.2em;) .ellipsis\u003e DIV + DIV :: after (ფონის ფერი: თეთრი; შინაარსი: "...";) */

გამოდის, რომ რედაქტირებისთვის ბევრი არაფერია. მთავარი ბლოკის სტილს დაემატა სამი ხაზი. ორი მათგანი მოიცავს ტექსტის გადავსებას. სიგანის დაყენება: IE– სთვის აუცილებელია 100% ისე, რომ ტექსტი არ ავრცელებს ბლოკს უსასრულობამდე და ტექსტის გადატვირთვის თვისება მუშაობს; სინამდვილეში, ჩვენ შევზღუდეთ სიგანე. თეორიულად, DIV, ისევე როგორც ბლოკის ყველა ელემენტი, გადაჭიმულია კონტეინერის მთელ სიგანეზე და სიგანეზე: 100% არის უსარგებლო და საზიანოც კი, მაგრამ IE– ს განლაგების პრობლემა აქვს, რადგან კონტეინერი ყოველთვის გაჭიმულია შინაარსის შესაფერისად, ამიტომ სხვა გზა არ არის. ჩვენ ყველა შინაგანი ელემენტი ჩავრთეთ შიგნით, რადგან ზოგიერთი ბრაუზერისთვის (Safari & Opera) ტექსტის გადავსება სხვაგვარად არ იმუშავებს, რადგან შიგნით ბლოკის ელემენტებია. ჩვენ განვიხილეთ ბოლო სამი წესი, რადგან ამ შემთხვევაში ისინი არ არის საჭირო და ყველაფერი წყდება (კონფლიქტები). ეს წესები მხოლოდ Firefox– ს სჭირდება.
ვნახოთ რა მოხდა და გავაგრძელოთ.

ნაბიჯი მესამე

როდესაც თავიდანვე გადავხედე გვერდს (სანამ ამ სტატიის დაწერას ვაპირებდი), რომელიც თავიდანვე იყო ნახსენები, დაინტერესების მიზნით, კომენტარი გადავხედე ჭკვიანურ იდეებს. კომენტარში აღმოვაჩინე, რომ ნათქვამია სხვა გამოსავალზე, რომელიც მუშაობს Firefox- სა და IE- ში (ამ ადამიანისთვის, როგორც პირველი სტატიის ავტორისთვის, სხვა ბრაუზერები აშკარად არ არსებობს). ამ გამოსავალში ავტორი გარკვეულწილად განსხვავებულად ებრძვის ამ ფენომენს (ტექსტის გადავსების ნაკლებობა), ჩამოკიდებული და ჩამონადენის მოვლენებზე დამმუშავებლები ჩამოკიდებული ელემენტებისთვის, რომელთათვისაც საჭირო იყო ელიფსისის დადება. ცუდი არ არის, მაგრამ მეჩვენება, რომ ეს გამოსავალი ძალიან ძვირია (რესურსების თვალსაზრისით), მით უმეტეს, რომ იგი გარკვეულწილად დახვეწილია მისთვის. ამასთან, გაერკვია, თუ როგორ მიაღწია ამას, მას წააწყდა საინტერესო რამ, კერძოდ CSS თვისება - moz- სავალდებულო. როგორც მივხვდი, ეს არის ქცევის ანალოგი IE– ში, მხოლოდ განსხვავებული სოუსით და უფრო მოულოდნელად. მოდით, დეტალებზე ნუ ჩავუღრმავდებით, ვთქვათ, რომ ამ გზით შეგიძლიათ JavaScript დამმუშავებელი ჩამოკიდოთ ელემენტს CSS– ის გამოყენებით. უცნაურად ჟღერს, მაგრამ მუშაობს. Რას ვაკეთებთ:

ელიფსისი (გადავსება: დამალული; თეთრი სივრცე: ახლახანი; ხაზის სიმაღლე: 1,2 em; სიმაღლე: 1,2 em; საზღვარი: 1px მყარი წითელი; ტექსტის გადაფარვა: ellipsis; -o-text-overflow: ellipsis; სიგანე: 100% ; -მოზ-სავალდებულო: url (moz_fix.xml # ellipsis); მასშტაბირება: 1; ) .ellipsis * (ჩვენება: inline;) .moz-ellipsis\u003e DIV: პირველი შვილი (ათწილადი: მარცხენა; ჩვენება: ბლოკი; } .moz-ellipsis\u003e DIV + DIV (float: მარჯვენა; margin-top: -1.2em; ჩვენება: ბლოკი; } .moz-ellipsis\u003e DIV + DIV :: შემდეგ (ფონის ფერი: თეთრი; შინაარსი: "...";)

როგორც ხედავთ, ჩვენ კვლავ ბევრი ცვლილება არ შევიტანეთ. IE7- ის ამ ეტაპზე უცნაური შეცდომაა, ყველაფერი დახრილია, თუ არ დააყენებთ მასშტაბის: 1 ძირითადი ერთეულისთვის (უმარტივესი ვარიანტი). თუ წაშალეთ (წაშალეთ, კომენტარი გააკეთეთ) .ellipsis * ან .moz-ellipsis\u003e DIV + DIV წესი (რომელიც საერთოდ არ ეხება IE7– ს), შეცდომა ქრება. ეს ყველაფერი უცნაურია, თუ ვინმემ იცის რაშია საქმე, მაცნობეთ. ახლა კი, მოდით, გავაუმჯობესოთ მასშტაბირება: 1 და გადავიდეთ Firefox- ზე.
-Moz სავალდებულო თვისება აკავშირებს moz_fix.xml ფაილს ინსტრუქციასთან იდენტიფიკატორის ელიფსისით. ამ xml ფაილის შინაარსი ასეთია:

ეს კონსტრუქტორი მხოლოდ დაამატებს moz-ellipsis კლასს იმ ელემენტს, რომლისთვისაც ამოქმედდა სელექტორი. ეს იმუშავებს მხოლოდ Firefox- ში (gecko ბრაუზერები?), ასე რომ მხოლოდ Firefox- ში დაემატება ელემენტებს moz-ellipsis კლასი და ამ კლასისთვის დამატებით წესების დამატება შეგვიძლია. და ეს მათ უნდოდათ. მე არ ვარ დარწმუნებული ამის აუცილებლობაში.style.mozBinding \u003d "", მაგრამ გამოხატვის გამოცდილებით უმჯობესია უსაფრთხოდ ითამაშო ეს (ზოგადად, მე Firefox- ის ამ მხარეს კარგად არ ვიცნობ, ამიტომ შეიძლება ვცდები).
შეიძლება გაგაფრთხილოთ, რომ ეს ტექნიკა იყენებს გარე ფაილს და ზოგადად JavaScript- ს. Არ შეგეშინდეს. პირველ რიგში, თუ ფაილი არ არის ჩატვირთული და / ან JavaScript გამორთულია და არ მუშაობს, არაუშავს, მომხმარებელი უბრალოდ ვერ დაინახავს ელიფსებს ბოლოს, ტექსტი იკეტება ბლოკის ბოლოს. ანუ, ამ შემთხვევაში მივიღებთ "არაობიექტურ" გამოსავალს. თავადაც ხედავთ.

ამრიგად, ჩვენ მივიღეთ დიდი ოთხი ბრაუზერის სტილი, რომელიც ახორციელებს Opera, Safari & IE ტექსტური გადატვირთვისთვის და მიჰბაძავს მას Firefox– ისთვის, არც თუ ისე ცხელი, მაგრამ ის უკეთესია, ვიდრე არაფერი.

ნაბიჯი მეოთხე

ამ ეტაპზე შეიძლება დასრულდეს წერტილი, მაგრამ მსურს ცოტათი გავაუმჯობესოთ ჩვენი გადაწყვეტა. მას შემდეგ, რაც შეგვიძლია კონსტრუქტორი დავკიდოთ ნებისმიერ ბლოკზე და, შესაბამისად, მასზე კონტროლის მოპოვება შეგვიძლია, რატომ არ გამოვიყენოთ ეს. მოდით გავამარტივოთ ჩვენი სტრუქტურა:

ძალიან გრძელი ტექსტი

ოჰ! ვფიქრობ, დამეთანხმებით - ეს არის ის, რაც გჭირდებათ!
ახლა მოდით ამოვიღოთ ყველა არასაჭირო სტილიდან:

ელიფსისი (გადავსება: დამალული; თეთრი სივრცე: ახლახანი; ხაზის სიმაღლე: 1.2 ე; სიმაღლე: 1.2 ე; ტექსტის გადაფარვა: ელიფსები; -ო-ტექსტური გადაფრენა: ელიფსები; სიგანე: 100%; -moz სავალდებულო url (moz_fix.xml # ellipsis);) .moz-ellipsis\u003e DIV: first-child (float: მარცხენა;) .moz-ellipsis\u003e DIV + DIV (float: right; margin-top: -1.2em;) .moz -ellipsis\u003e DIV + DIV :: შემდეგ (ფონის ფერი: თეთრი; შინაარსი: "...";)

ჩვენ საბოლოოდ წაშალეთ წითელი საზღვარი :)
მოდით, ცოტათი დავამატოთ ჩვენი moz_fix.xml:

Რა ხდება აქ? ჩვენ ხელახლა ვადგენთ ჩვენს თავდაპირველ HTML სტრუქტურას. ეს არის ის, რომ ბლოკებთან დაკავშირებული სირთულეები ხდება ავტომატურად და მხოლოდ Firefox– ში. JavaScript კოდი დაწერილია საუკეთესო ტრადიციებში :)
სამწუხაროდ, ჩვენ არ შეგვიძლია თავიდან ავიცილოთ სიტუაცია, როდესაც ტექსტი შეწყვეტილია წერილის შუაში (თუმცა, შესაძლოა დროებით, რადგან ჩემი გამოსავალი ჯერ კიდევ ძალიან ნედლია და შეიძლება მომავალში გამოვიდეს). მაგრამ ჩვენ შეგვიძლია ცოტათი გავუმსუბუქოთ ეს ეფექტი. ამისათვის ჩვენ გვჭირდება გამოსახულება (თეთრი ფონი გამჭვირვალე გრადიენტით) და სტილის რამდენიმე ცვლილება:

.moz-ellipsis\u003e DIV: პირველი ბავშვი (float: მარცხენა; ზღვარი მარჯვნივ: -26 პიქსელი; ) .moz-ellipsis\u003e DIV + DIV (float: მარჯვენა; margin-top: -1.2em;). ფონი: url (ellipsis.png) განმეორებით-y; padding-left: 26px; }

ჩვენ ვუყურებთ და ვტკბებით ცხოვრებით.

ამაზე და ბოლო მოეღო.

დასკვნა

მე მოვიყვან მცირე მაგალითს მესამე მხარის განლაგებისათვის. ავიღე ვიკიპედიის ერთ-ერთი გვერდის შინაარსი (პირველი, რომელიც აღმოჩნდა) და მისთვის ზემოთ აღწერილი მეთოდი გამოვიყენე.
ზოგადად, ამ გამოსავალს უნივერსალური შეიძლება ეწოდოს მხოლოდ მონაკვეთიდან. ყველაფერი დამოკიდებულია თქვენს განლაგებაზე და მის სირთულეზე. შეიძლება დაგჭირდეთ ფაილი, ან იქნებ ბოლი. მიუხედავად იმისა, რომ უმეტეს შემთხვევაში, ვფიქრობ, ეს იმუშავებს. შემდეგ, თქვენ გაქვთ ამოსავალი წერტილი;)
იმედი მაქვს, რომ რამე საინტერესო და სასარგებლო რამ ისწავლეთ სტატიიდან;) ისწავლეთ, ექსპერიმენტები გაზიარეთ.
Წარმატებები!

ვლად მერჟევიჩი

მიუხედავად იმისა, რომ დიდი დიაგონალის მქონე მონიტორები უფრო და უფრო ხელმისაწვდომი ხდება და მათი რეზოლუცია მუდმივად იზრდება, ზოგჯერ ამოცანა იქმნება შეზღუდულ სივრცეში, რომ მოხვდეს უამრავ ტექსტს. მაგალითად, ეს შეიძლება იყოს საჭირო საიტის მობილური ვერსიისთვის ან ინტერფეისისთვის, სადაც ხაზების რაოდენობა მნიშვნელოვანია. ასეთ შემთხვევებში აზრი აქვს ტექსტის გრძელი სტრიქონების მოჭრას, წინადადების მხოლოდ დასაწყისს ტოვებს. ამრიგად, ჩვენ ინტერფეისს კომპაქტურ ფორმაში მივიყვანთ და გამოვაქვეყნებთ ნაჩვენები ინფორმაციის რაოდენობას. ხაზების ფაქტობრივი დალაგება შეიძლება გაკეთდეს სერვერის მხრიდან იგივე PHP– ს გამოყენებით, მაგრამ CSS– ით უფრო ადვილია, უფრო მეტიც, ყოველთვის შეგიძლიათ აჩვენოთ მთელი ტექსტი, მაგალითად, როდესაც მასზე მაუსის კურსორით მიდიხართ. შემდეგ განვიხილავთ მეთოდებს, თუ როგორ უნდა მოჭრა ტექსტი მოჩვენებითი მაკრატლით.

სინამდვილეში, ეს ყველაფერი საქმე ეხება გადაფარებული თვისების ფარული მნიშვნელობის გამოყენებას. განსხვავებები მხოლოდ ჩვენი ტექსტის განსხვავებულ ჩვენებაშია.

წყალდიდობის გამოყენება

იმისათვის, რომ გადავსების თვისებამ თავი იჩინოს ტექსტით მთელი თავისი ბრწყინვალებით, თქვენ უნდა გააუქმოთ ტექსტის შეფუთვა თეთრი სივრცის გამოყენებით, ახლა მნიშვნელობით. თუ ეს არ გაკეთებულა, მაშინ ჩვენთვის საჭირო ეფექტი არ იქნება, ტექსტს დაემატება დეფისები და ის ნაჩვენები იქნება მთლიანობაში. მაგალითში 1 ნაჩვენებია, თუ როგორ უნდა მოვიჭრათ გრძელი ტექსტი სტილის მახასიათებლების მითითებული ნაკრებით.

მაგალითი 1. ტექსტის გადავსება

HTML5 CSS3 IE Cr Op Sa Fx

ამ მაგალითის შედეგი ნაჩვენებია ნახატზე. 1

ფიგურა: 1. ტექსტის ტიპი გადავსების თვისების გამოყენების შემდეგ

როგორც სურათიდან ჩანს, ზოგადად მხოლოდ ერთი ნაკლი არსებობს - აშკარა არ არის, რომ ტექსტს აქვს გაგრძელება, ამიტომ მომხმარებელმა ამის შესახებ უნდა გაითვალისწინოს. ეს ჩვეულებრივ კეთდება გრადიენტით ან ელიფსებით.

ტექსტს გრადიენტის დამატება

იმისათვის, რომ უფრო გასაგებად გახდეს, რომ ტექსტი მარჯვნივ არ მთავრდება, შეგიძლიათ გადააფაროთ მას გრადიენტით გამჭვირვალედან ფონის ფერით (სურათი 2). ეს შექმნის ტექსტის ეტაპობრივი დაშლის ეფექტს.

ფიგურა: 2. გრადიენტული ტექსტი

მაგალითი 2 გვიჩვენებს, თუ როგორ უნდა შექმნათ ეს ეფექტი. თავად ელემენტის სტილი პრაქტიკულად იგივე დარჩება, გრადიენტი დაემატება :: after pseudo- ელემენტის და CSS3 გამოყენებით. ამისათვის ჩადეთ ცარიელი ფსევდოელემენტი შინაარსის თვისების საშუალებით და გამოიყენეთ მას გრადიენტი სხვადასხვა პრეფიქსით ძირითადი ბრაუზერებისათვის (მაგალითი 2). გრადიენტის სიგანე ადვილად შეიცვლება სიგანეზე, ასევე შეგიძლიათ შეცვალოთ გამჭვირვალობის დონე 0.2 მნიშვნელობის შეცვლით საკუთარით.

მაგალითი 2. ტექსტზე გრადიენტი

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

ინტრა-დისკრეტული არპეჯიო გარდაქმნის მრავალ რიგს; ეს არის ერთსაფეხურიანი ვერტიკალი ულტრა პოლიფონიურ ქსოვილში.

ეს მეთოდი არ მუშაობს Internet Explorer– ში 8.0 ვერსიამდე, რადგან ის მხარს არ უჭერს გრადიენტებს. მაგრამ შეგიძლიათ უარი თქვათ CSS3– ზე და გააკეთოთ გრადიენტი ძველებურად, PNG-24 სურათის გამოყენებით.

ეს მეთოდი მუშაობს მხოლოდ მყარ ფონზე და ფონის სურათის შემთხვევაში, ტექსტზე გრადიენტი იქნება გასაოცარი.

ელიფსისი ტექსტის ბოლოს

ჩამოჭრილი ტექსტის ბოლოს გრადიენტის ნაცვლად შეგიძლიათ გამოიყენოთ ელიფსები. უფრო მეტიც, იგი ავტომატურად დაემატება ტექსტის გადავსების თვისების გამოყენებით. ეს ესმის ყველა ბრაუზერს, IE– ს ძველი ვერსიების ჩათვლით, და ამ თვისების ერთადერთი ნაკლი მისი ჯერ კიდევ გაურკვეველი სტატუსია. როგორც ჩანს, ეს თვისება შედის CSS3- ში, მაგრამ მასთან ერთად კოდი არ გაივლის ვალიდაციას.

მე -3 მაგალითი გვიჩვენებს ელიფსისის თვისების ტექსტის გადავსებას, რაც დაამატებს ელიფსს. როდესაც მაუსის კურსორი მიაქციეთ ტექსტს, ის სრულად აისახება და ხაზგასმულია ფონის ფერით.

მაგალითი 3. ტექსტის გადავსების გამოყენება

HTML5 CSS3 IE Cr Op Sa Fx

ამ მაგალითის შედეგი ნაჩვენებია ნახატზე. 3

ფიგურა: 3. ტექსტი ელიფსისით

ამ მეთოდების დიდი პლუსია ის ფაქტი, რომ გრადიენტი და ელიფსები არ ჩანს, თუ ტექსტი მოკლეა და მთლიანად ჯდება მითითებულ არეალში. ასე რომ, ტექსტი ჩვეულებრივ გამოჩნდება, როდესაც ის სრულად ჩანს ეკრანზე და ჩამოიჭრება, როდესაც ელემენტის სიგანე შემცირდება.

ზოგჯერ ზოგჯერ მაღიზიანებს პროდუქტის ბმულების გრძელი სახელები - თითოეული სამი ხაზი - ან სხვა ბლოკების გრძელი სათაურები. რამდენად კარგი იქნება, თუკი როგორმე შეძლებთ მთლიანობის შეზღუდვას, უფრო კომპაქტურს გახდით მას. და როდესაც მაუსს მიიტანთ, სრულად აჩვენეთ სათაური.

ამისათვის ჩვენი საყვარელი CSS გამოგვადგება. ძალიან მარტივია, შეხედე.

ვთქვათ, კატალოგის ასეთი ბლოკი გვაქვს საქონლით:

აქ არის მისი სტრუქტურა:

აქ მოცემულია მისი სტილები:

Someblock (საზღვარი: 1px მყარი #cccccc; მინდორი: 15px ავტომატური; padding: 10px; სიგანე: 250px;). სათაური (საზღვრის ქვედა ნაწილი: 1px გაწყვეტილი; შრიფტის ზომა: 16px; შრიფტის წონა: სქელი; margin-bottom: 12px ;)

ვეთანხმები, საშინლად გამოიყურება. რა თქმა უნდა, შეგიძლიათ შეამციროთ პროდუქტის სახელი. მაგრამ თუ ასობით ან ათასობით მათგანია? ასევე შეგიძლიათ გამოიყენოთ php სახელის ნაწილის ამოსაჭრელად, რომ შეიზღუდოთ სიმბოლოების გარკვეული რაოდენობით. მაგრამ რა მოხდება, თუ განლაგება მოგვიანებით შეიცვლება და ბლოკები უფრო მცირეა ან პირიქით 2-3-ჯერ უფრო დიდი? არცერთი მათგანი არ არის ვარიანტი, არცერთი არ გვაწყობს.

ეს არის ის, სადაც CSS და მისი ჯადოსნური ქონება გვეშველება. ტექსტის გადავსება... მაგრამ საჭიროა მისი სწორად გამოყენება რამდენიმე სხვა თვისებასთან ერთად. ქვემოთ მე გაჩვენებთ მზა გამოსავალს, რის შემდეგაც აგიხსნით რა რა.

ამრიგად, პროდუქტების სახელების რედაქტირებისა და სტილის პროგრამული მორთვის გვერდით დადება, ჩვენ ვიღებთ CSS– ს და ვნახავთ რას მივიღებთ:

სასწაული იუდოს ელექტრომომარაგების აგენტი არის საღამო, იდუმალი, ხელოვნება. 20255-59 წწ

შესანიშნავი პროდუქტი სუპერ ფასად, მხოლოდ 100 მანეთი. გააბრწყინეთ თქვენი მარტოხელა საღამოები და გაცოცხლდით ენერგიით!

აბა, ჯობია? ჩემი აზრით, ძალიან კი! თაგუნას გადაუსვით სათაური ... voila! აქ ის სრულად გვეჩვენება.

ჩვენს სტრუქტურაში არაფერი შეცვლილა, მე უბრალოდ კლავიშის დივა დავამატე .თავი სათაურის ნიშანი. აქ მოცემულია ახალი, განახლებული სტილები:

Someblock (საზღვარი: 1px მყარი #cccccc; მინდორი: 15px ავტომატური; padding: 10px; სიგანე: 250px;). სათაური (საზღვრის ქვედა ნაწილი: 1px გაწყვეტილი; შრიფტის ზომა: 16px; შრიფტის წონა: სქელი; margin-bottom: 12px ; overflow: დამალული; text-overflow: ellipsis; white-space: nowrap;)

ნახეთ რა გავაკეთეთ:

• ჩვენ დავამატეთ ქონება ბლოკში თეთრი სივრცე: ახლახანს, რომელიც ამოიღებს ტექსტს სიტყვების ახალ სტრიქონზე შეფუთვის შესაძლებლობას, რითაც იგი სტრიქონში გადაიყვანს;
• შემდეგ ჩვენ დავამატეთ ქონება გადავსება: დაფარული, რამაც ჩვენი ხაზის ხილვადობა შემოიფარგლა ბლოკის სიგანეზე, რითაც შეწყვიტა ყველა ზედმეტი და არ აჩვენა იგი ვიზიტორს;
• დასასრულს, ჩვენ ხაზს დავუმატეთ სამი ხაზი თვისების გამოყენებით ტექსტის გადავსება: ელიფსისი, რითაც ვიზიტორს საშუალებას მისცემს გააცნობიეროს, რომ ეს სტრიქონის ბოლო არ არის და აუცილებელია, თაგვის აწევა და მისი სრულად დანახვა.

გიყვარს CSS, ისწავლე CSS და საიტის შექმნა შენთვის არც ისე რთული იქნება \u003d)

არსებობს თვითნებური სიგრძის ტექსტი, რომელიც უნდა იყოს ნაჩვენები ფიქსირებული სიმაღლისა და სიგანის ბლოკში. ამ შემთხვევაში, თუ ტექსტი სრულად არ ჯდება, ნაჩვენები უნდა იყოს ტექსტის ნაჭერი, რომელიც მთლიანად ჯდება მითითებულ ბლოკში, რის შემდეგაც ხდება ელიფსისის მითითება.

ასეთი დავალება საკმაოდ ხშირია, ამავე დროს, ის ისეთი ტრივიალური არ არის, როგორც ჩანს.

CSS– ში ერთი სტრიქონის ტექსტის ვარიანტი

ამ შემთხვევაში შეიძლება გამოყენებულ იქნას ტექსტის გადაფარვა: ელიფსისის თვისება. ამ შემთხვევაში, კონტეინერს უნდა ჰქონდეს ქონება გადავსება თანაბარი დაფარული ან კლიპი

ბლოკი (სიგანე: 250px; თეთრი სივრცე: nowrap; გადავსება: დამალული; ტექსტის გადაფარვა: ელიფსები;)

მრავალსტრიქონიანი CSS ტექსტის ვარიანტი

CSS თვისებების გამოყენებით მრავალ ხაზოვანი ტექსტის მოსავლის პირველი გზაა ფსევდოელემენტების გამოყენება : ადრე და : შემდეგ... პირველი, HTML მარკირება

ახლა კი თვისებები თავად

ყუთი (გადავსება: დამალული; სიმაღლე: 200px; სიგანე: 300px; ხაზის სიმაღლე: 25px;). ყუთი: ადრე (შინაარსი: ""; ათწილადი: მარცხენა; სიგანე: 5px; სიმაღლე: 200px;). ყუთი\u003e *: პირველი -child (float: right; width: 100%; margin-left: -5px;) .box: after (შინაარსი: "\\ 02026"; ყუთის ზომის: შინაარსი-ყუთი; float: მარჯვნივ; პოზიცია: ნათესავი; ზედა: -25px; მარცხნივ: 100%; სიგანე: 3em; ზღვარი მარცხნივ: -3em; padding-right: 5px; ტექსტის გასწორება: მარჯვნივ; ფონის ზომა: 100% 100%; ფონი: ხაზოვანი-გრადიენტი (მარჯვნივ, rgba (255, 255, 255, 0), თეთრი 50%, თეთრი);)

კიდევ ერთი გზაა სვეტის სიგანის თვისების გამოყენება, რომლითაც ვაყენებთ სვეტის სიგანეს მრავალსტრიქონიანი ტექსტისთვის. ამასთან, ამ მეთოდის გამოყენებისას, ბოლოს ვერ მიიღებთ ელიფსს. HTML:

ბლოკი (გადავსება: დამალული; სიმაღლე: 200px; სიგანე: 300px;) .block__inner (-webkit- სვეტის სიგანე: 150px; -moz- სვეტის სიგანე: 150px; სვეტის სიგანე: 150px; სიმაღლე: 100%;)

CSS– ში მრავალსტრიქონიანი ტექსტის მესამე გამოსავალი არის ბრაუზერები ვებ – ნაკრები... მასში მოგვიწევს რამდენიმე სპეციფიკური თვისების გამოყენება პრეფიქსით -ვებქიტი... მთავარია -webkit-line-clamp, რომელიც საშუალებას გაძლევთ მიუთითოთ ხაზების რაოდენობა, რომლებიც გამოისახება ბლოკში. გამოსავალი ლამაზია, მაგრამ საკმაოდ შეზღუდულია ბრაუზერების შეზღუდულ ჯგუფში მუშაობის გამო

დაბლოკვა (გადავსება: დამალული; ტექსტის გადაფარვა: ელიფსისი; ჩვენება: -ვებქსეტის ყუთი; -ვებქიტის ხაზი-დამჭერი: 2; -ვებქიტ-ყუთი-ორიენტი: ვერტიკალური;)

JavaScript ვარიანტი მრავალ ხაზოვანი ტექსტისთვის

აქ გამოიყენება დამატებითი უხილავი ბლოკი, რომელშიც თავდაპირველად განთავსებულია ჩვენი ტექსტი, რის შემდეგაც, ერთჯერადი ერთი სიმბოლო წაიშლება მანამ, სანამ ამ ბლოკის სიმაღლე არ გახდება სასურველი ბლოკის სიმაღლეზე ნაკლები ან ტოლი. და ბოლოს, ტექსტი გადადის თავდაპირველ ბლოკში.

var ბლოკი \u003d დოკუმენტი. querySelector (". ბლოკი"), text \u003d ბლოკი. innerHTML, კლონი \u003d დოკუმენტი. createElement ("div"); კლონირება. სტილი პოზიცია \u003d "აბსოლუტური"; კლონირება. სტილი ხილვადობა \u003d "ფარული"; კლონირება. სტილი სიგანე \u003d ბლოკი. clientWidth + "px"; კლონირება. innerHTML \u003d ტექსტი; დოკუმენტი სხეული appendChild (კლონი); var l \u003d ტექსტი. სიგრძე - 1; (; l\u003e \u003d 0 && კლონი. clientHeight\u003e ბლოკი. clientHeight; - l) (კლონი. innerHTML \u003d ტექსტი. ქვესათაური (0, ლ) + "...";) ბლოკი. innerHTML \u003d კლონი. შინაგანი HTML

ეს არის jQuery- ის მოდული:

(ფუნქცია ($) (var truncate \u003d ფუნქცია (el) (var ტექსტი \u003d ელ. ტექსტი (), სიმაღლე \u003d ელ. სიმაღლე (), კლონი \u003d ელ. კლონი (); კლონი. css ((პოზიცია: "აბსოლუტური", ხილვადობა: "დამალული", სიმაღლე: "ავტო"); ელ. შემდეგ (კლონი); var l \u003d ტექსტი. სიგრძე - 1; for (; l\u003e \u003d 0 && კლონი. სიმაღლე ()\u003e სიმაღლე; - ლ) (კლონი. ტექსტი (ტექსტი. ქვესათაური (0, ლ) + "...");) ელ. ტექსტი (კლონი. ტექსტი ()); კლონი. ამოღება ();); $. fn. truncateText \u003d ფუნქცია () (დააბრუნეთ ეს. თითოეული (ფუნქცია () (შეკვეცი ($ (ეს));)););) (jQuery));

CSS3– ის დანერგვამ რევოლუცია მოახდინა ვებ – დიზაინერების ყოველდღიურ ცხოვრებაში. CSS3 არასდროს წყვეტს ჩვენს გაოცებას ყოველდღე. საქმეები, რომელთა შესრულება ადრე მხოლოდ javascript– ით ხდებოდა, ახლა CSS3– ით ადვილად ხდება. მაგალითად, Text-Overflow თვისება.

ზოგჯერ საიტების შექმნის პროცესში უნდა დავმალოთ ზოგიერთი დინამიური ტექსტი შემდეგ სტრიქონზე გადასვლის გარეშე. ანუ, ჩასვით გრძელი ტექსტი ფიქსირებული სიგანის ცხრილში. ამავდროულად, საჭიროა მომხმარებელს ვაჩვენოთ, რომ ტექსტის ხილული ნაწილი ყველაფერი არ არის. ასევე არის ფარული ნაწილი. ამის ჩვენება შესაძლებელია ელიფსისით (...).

CSS3– ის საშუალებით მარტივად შეგვიძლია ამის გაკეთება CSS– ის ტექსტური გადატვირთვის თვისების გამოყენებით

მონიშვნა

ტექსტის გადავსება: ელიფსისი;

მნიშვნელობა ელიფსისი საშუალებას გაძლევთ ტექსტის შემდეგ დაამატოთ ელიფსები (...)

ტექსტის გადაფარვა: ellipsis თვისება გამოდგება, როდესაც:

1. ტექსტი გადის უჯრედის გარეთ
2. უჯრედს აქვს თავისუფალი ადგილი: ახლანდელი.

ჩვენ გვაქვს 150 პიქსელის სიგანე div, რომ ვაჩვენოთ კომპანიის სახელები მონაცემთა ბაზაში. ამავდროულად, ჩვენ არ გვინდა, რომ კომპანიის დიდი ხანს გადახვიდეთ ახალ ხაზზე და გააფუჭონ სუფრის იერსახე. ანუ, ჩვენ უნდა დავმალოთ ტექსტი, რომელიც სცილდება 150 პიქსელს. ამის შესახებ გვსურს მომხმარებლის ინფორმირება. ასე რომ, ის ნიშნავს, რომ ყველა სახელი არ არის ნაჩვენები. და ჩვენ გვინდა, რომ მთელი ტექსტი გამოისახოს მაუსის გადასაადგილებელზე.

მოდით შევხედოთ თუ როგორ შეგვიძლია ამის გაკეთება CSS3– ით.

კომპანია შეფუთეთ ul li (
ტექსტის გადავსება: ელიფსისი;
გადავსება: დამალული;
თეთრი სივრცე: ახლახანს; )

ბრაუზერის მხარდაჭერა

ბრაუზერების მხარდაჭერით, ამ თვისებას აქვს ერთი პატარა ნიუანსი. Firefox– ის გარდა ყველა კარგად არის. მაგრამ, საბედნიეროდ, ამ პრობლემის გადაჭრაც არსებობს!

ელიფსისი Firefox- ში

სამწუხაროდ, Firefox- ის gecko (გამაძლიერებელი ძრავა) არ უჭერს მხარს ამ თვისებას. ამასთან, ეს ბრაუზერი მხარს უჭერს XBL– ს, რომლითაც ამ სიტუაციიდან გამოვალთ.

გეკო უფასო განლაგებაა ძრავისთვის Mozilla Firefox, Netscape და სხვებისთვის. ძველი სახელებია "Raptor" და "NGLayout". Gecko– ს ძირითადი კონცეფციაა ღია ინტერნეტის სტანდარტების მხარდაჭერა, როგორიცაა HTML, CSS, W3C DOM, XML 1.0 და JavaScript. სხვა კონცეფციაა cross-platform. დღეს Gecko მუშაობს Linux, Mac OS X, FreeBSD და Microsoft Windows ოპერაციული სისტემებით, ასევე Solaris, HP-UX, AIX, Irix, OS / 2, OpenVMS, BeOS, Amiga და სხვა.

Firefox- ში ელიფსისის საჩვენებლად, სტილის ფურცელს უნდა დავამატოთ ერთი ხაზი.

თუ გსურთ გამორთოთ ქონება, დაამატეთ:

Moz- სავალდებულო: url ("bindings.xml # no");

შემდეგი ნაბიჯი არის შექმნათ bindings.xml ფაილი იმავე ადგილას, სადაც სტილის ფურცელი. ამისათვის შეგვიძლია გამოვიყენოთ ნებისმიერი ტექსტური რედაქტორი! დააკოპირეთ კოდი ქვემოთ და დაასახელეთ ფაილი bindings.xml.

document.getAnonymousNodes (ეს) [0]
ეს. იარლიყი. სტილი
ეს. სტილი. ჩვენება
თუ (this.style.display! \u003d val) this.style.display \u003d val

ეს. ლეიბლი. ღირებულება
თუ (ეს. ეტიკეტი. მნიშვნელობა! \u003d ვალი) ეს. ეტიკეტი. მნიშვნელობა \u003d ვალუტა



var strings \u003d this.textContent.split (/ \\ s + / g)
if (! strings [0]) strings.shift ()
if (! strings [strings.length - 1]) strings.pop ()
this.value \u003d strings.join ("")
ეს. ჩვენება \u003d სტრიქონები. სიგრძე? "": "არცერთი"




ეს. განახლება ()


ეს. განახლება ()

ყველა ბრაუზერის საბოლოო კოდი

კომპანია შეფუთეთ ul li (
ტექსტის გადავსება: ელიფსისი;
-o-text-overflow: ელიფსები;
-moz- სავალდებულო: url ("bindings.xml # ellipsis");
თეთრი სივრცე: ახლახანს;
გადავსება: დამალული;
}

CSS3 ხდება ვებდიზაინერების მთავარი იარაღი მთელ მსოფლიოში, რომ შექმნან არასდროს ნანახი საიტები მინიმალური კოდით. არსებობს მარტივი ერთსტრიქონიანი გადაწყვეტილებები, რომლებიც ადრე მხოლოდ Photoshop ან javascript– ით იყო შესაძლებელი. დაიწყეთ CSS3 და HTML5 შესაძლებლობების შესწავლა დღეს და არ ინანებთ!

თარჯიმნების ნაცრისფერი მასისგან გამორჩევა და თქვენი სიმპათიის მოპოვება, ძვირფასო მკითხველო, ჩემი გაკვეთილების ბოლოს გაჩნდება ბრძნული აზრები და აფორიზმები. ამ სტრიქონებში ყველას იპოვის რაიმე თავისებური :)

ღირსეულად გაუძელი იმას, რასაც ვერ შეცვლი.