განსაზღვრავს ტექსტის ხილვადობას ბლოკში, თუ მთელი ტექსტი არ ჯდება მითითებულ არეალში. არსებობს ორი ვარიანტი: ტექსტი გათიშულია; ტექსტი შემცირდება და სტრიქონის ბოლოს ელისფსიას ემატება. text-overflow მუშაობს, როდესაც overflow თვისება დაყენებულია ავტომატურად, გადახვევა ან დამალული ბლოკისთვის.
მოკლე ინფორმაცია
დანიშნულებები
| აღწერა | მაგალითი | |
|---|---|---|
| <тип> | მიუთითებს მნიშვნელობის ტიპზე. | <размер> |
| A&& B | მნიშვნელობები უნდა აისახოს ნაჩვენები თანმიმდევრობით. | <размер> && <цвет> |
| ა | ბ | მიუთითებს, რომ შემოთავაზებული მნიშვნელობებიდან მხოლოდ ერთი უნდა იყოს შერჩეული (A ან B). | ნორმალური | მცირე ზომის კაპები |
| ა || ბ | თითოეული მნიშვნელობის გამოყენება შეიძლება როგორც ცალკე, ასევე სხვებთან ერთად ნებისმიერი თანმიმდევრობით. | სიგანე || ითვლიან |
| ჯგუფების მნიშვნელობები. | [მოსავალი || ჯვარი] | |
| * | გაიმეორეთ ნულოვანი ან მეტი ჯერ. | [,<время>]* |
| + | გაიმეორეთ ერთი ან მეტი ჯერ. | <число>+ |
| ? | მითითებული ტიპი, სიტყვა ან ჯგუფი არასავალდებულოა. | ჩასმული? |
| (A, B) | გაიმეორეთ მინიმუმ A, მაგრამ არა უმეტეს B ჯერ. | <радиус>{1,4} |
| # | გაიმეორეთ ერთი ან მეტი ჯერ, მძიმით გამოყოფილი. | <время># |
ღირებულებები
კლიპი ტექსტი ჩამოჭრილია, რომ მოერგოს ტერიტორიას. ellipsis ტექსტი შეკვეცილია და სტრიქონის ბოლოს დაემატება ელიფსისი.
მაგალითი
მაგნიტური ველი უმნიშვნელოდ აქრობს ციური სფეროს დიდ წრეს, ამ შემთხვევაში იზრდება ექსცენტრიკულები და ორბიტების მიდრეკილებები.
ამ მაგალითის შედეგი ნაჩვენებია ნახატზე. ერთი
ფიგურა: 1. ელიფსისი ტექსტის ბოლოს
ობიექტის მოდელი
Საგანი.სტილი.ტექსტის გადაფრენა
შენიშვნა
მე -11 ვერსიამდე ოპერა იყენებს -o-text-overflow თვისებას.
სპეციფიკაცია
თითოეული სპეციფიკაცია გადის დამტკიცების რამდენიმე ეტაპს.
- რეკომენდაცია - ამ სპეციფიკაციას მხარს უჭერს W3C და რეკომენდირებულია როგორც სტანდარტი.
- კანდიდატის რეკომენდაცია ( შესაძლო რეკომენდაცია) - სტანდარტზე პასუხისმგებელი ჯგუფი დარწმუნებულია, რომ იგი შეესაბამება მის მიზნებს, მაგრამ სტანდარტის დანერგვისთვის საჭიროა დეველოპერული საზოგადოების დახმარება.
- შემოთავაზებული რეკომენდაცია ( შემოთავაზებული რეკომენდაცია) - ამ ეტაპზე დოკუმენტი გადაეცემა W3C მრჩეველთა საბჭოს საბოლოო დასამტკიცებლად.
- სამუშაო პროექტი - პროექტის უფრო სექსუალურ ვერსია დისკუსიისა და საზოგადოების განხილვის შესწორებების შემდეგ.
- რედაქტორის მონახაზი ( სარედაქციო პროექტი) - სტანდარტის სტანდარტული ვერსია პროექტის რედაქტორების მიერ რედაქტირების შემდეგ.
- პროექტი ( დაზუსტების პროექტი) სტანდარტის პირველი პროექტია.
ვლად მერჟევიჩი
მიუხედავად იმისა, რომ დიდი დიაგონალების მონიტორები უფრო და უფრო ხელმისაწვდომი ხდება და მათი რეზოლუცია მუდმივად იზრდება, ზოგჯერ ამოცანა იქმნება შეზღუდულ სივრცეში, რომ მოხვდეს ბევრი ტექსტი. მაგალითად, ეს შეიძლება იყოს საჭირო საიტის მობილური ვერსიისთვის ან ინტერფეისისთვის, სადაც ხაზების რაოდენობა მნიშვნელოვანია. ასეთ შემთხვევებში აზრი აქვს ტექსტის გრძელი სტრიქონების მოჭრას, წინადადების მხოლოდ დასაწყისს ტოვებს. ასე რომ, ჩვენ ინტერფეისს კომპაქტურ ფორმაში მოვიყვანთ და გამოვაქვეყნებთ ინფორმაციის რაოდენობას. ხაზების ფაქტობრივი დალაგება შეიძლება გაკეთდეს სერვერის მხრიდან იგივე PHP– ს გამოყენებით, მაგრამ CSS– ით უფრო ადვილია, უფრო მეტიც, ყოველთვის შეგიძლიათ აჩვენოთ მთელი ტექსტი, მაგალითად, როდესაც მასზე მაუსის კურსორით მიდიხართ. შემდეგ განვიხილავთ მეთოდებს, თუ როგორ უნდა მოჭრა ტექსტი მოჩვენებითი მაკრატლით.
სინამდვილეში, ეს ყველაფერი საქმე ეხება გადაფარებული თვისების ფარული მნიშვნელობის გამოყენებას. განსხვავებები მხოლოდ ჩვენი ტექსტის განსხვავებულ ჩვენებაშია.
წყალდიდობის გამოყენება
იმისათვის, რომ გადავსების თვისებამ თავი იჩინოს ტექსტით მთელი თავისი ბრწყინვალებით, თქვენ უნდა გააუქმოთ ტექსტის შეფუთვა თეთრი სივრცის გამოყენებით, ახლა მნიშვნელობით. თუ ეს არ გაკეთებულა, მაშინ ჩვენთვის საჭირო ეფექტი არ იქნება, ტექსტს დაემატება დეფისები და ის ნაჩვენები იქნება მთლიანობაში. მაგალითი 1 გვიჩვენებს, თუ როგორ უნდა მოჭრათ გრძელი ტექსტი სტილის მახასიათებლების მითითებული ნაკრებით.
მაგალითი 1. ტექსტის გადავსება
HTML5 CSS3 IE Cr Op Sa Fx
ამ მაგალითის შედეგი ნაჩვენებია ნახატზე. ერთი
ფიგურა: 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. ტექსტი ელიფსისით
ამ მეთოდების დიდი პლუსია ის ფაქტი, რომ გრადიენტი და ელიფსები არ ჩანს, თუ ტექსტი მოკლეა და მთლიანად ჯდება მითითებულ არეალში. ასე რომ, ტექსტი ჩვეულებრივ გამოჩნდება, როდესაც ის სრულად ჩანს ეკრანზე და ჩამოიჭრება, როდესაც ელემენტის სიგანე შემცირდება.
CSS3– ის დანერგვამ რევოლუცია მოახდინა ვებ – დიზაინერების ყოველდღიურ ცხოვრებაში. CSS3 არასდროს წყვეტს ჩვენს გაოცებას ყოველდღე. საქმეები, რომელთა შესრულება ადრე მხოლოდ javascript– ით ხდებოდა, ახლა CSS3– ით ადვილად ხდება. მაგალითად, Text-Overflow თვისება.
ზოგჯერ საიტების შექმნის პროცესში უნდა დავმალოთ ზოგიერთი დინამიური ტექსტი შემდეგ სტრიქონზე გადასვლის გარეშე. ანუ, ჩასვით გრძელი ტექსტი ფიქსირებული სიგანის ცხრილში. ამავდროულად, საჭიროა მომხმარებელს ვაჩვენოთ, რომ ტექსტის ხილული ნაწილი ყველაფერი არ არის. ასევე არის ფარული ნაწილი. ამის ჩვენება შესაძლებელია ელიფსისით (...).
CSS3– ის საშუალებით ჩვენ შეგვიძლია ამის გაკეთება მარტივად CSS– ის ტექსტის გადატვირთვის თვისების გამოყენებით
მონიშვნა
ტექსტის გადავსება: ელიფსისი;
მნიშვნელობა ელიფსისი საშუალებას გაძლევთ დაამატოთ ელიფსია (...) ტექსტის შემდეგ
ტექსტის გადაფარვა: ellipsis თვისება გამოდგება, როდესაც:
1. ტექსტი გადის უჯრედის გარეთ
2. უჯრედს აქვს თავისუფალი ადგილი: ახლანდელი.
ჩვენ გვაქვს div 150px სიგანე, რომ მონაცემთა სახელებიდან კომპანიის სახელები გამოვყოთ. ამავე დროს, ჩვენ არ გვინდა, რომ გრძელი კომპანიის სახელები გადახვიდეთ ახალ ხაზზე და გააფუჭონ სუფრის იერსახე. ანუ, ჩვენ უნდა დავმალოთ ტექსტი, რომელიც სცილდება 150 პიქსელს. ამის შესახებ გვსურს მომხმარებლის ინფორმირება. ასე რომ, ის ნიშნავს, რომ ყველა სახელი არ არის ნაჩვენები. და ჩვენ გვინდა, რომ მთელი ტექსტი გამოისახოს მაუსის გადასაადგილებელზე.
მოდით შევხედოთ თუ როგორ შეგვიძლია ამის გაკეთება CSS3– ით.
კომპანია შეფუთეთ ul li (
ტექსტის გადავსება: ელიფსები;
გადავსება: დამალული;
თეთრი სივრცე: ახლახანს; )
- კომპანიის სახელი
- Envestnet აქტივების მენეჯმენტი
- რასელ ინვესტიციები
- ჩრდილო-დასავლეთის ურთიერთდაფინანსების ქსელი
- ING ფინანსური ქსელები
ბრაუზერის მხარდაჭერა
ბრაუზერის მხარდაჭერით, ამ თვისებას აქვს ერთი პატარა ნიუანსი. 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.
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 შესაძლებლობების შესწავლა დღეს და არ ინანებთ!
თარჯიმნების ნაცრისფერი მასისგან გამორჩევა და თქვენი სიმპათიის მოპოვება, ძვირფასო მკითხველო, ჩემი გაკვეთილების ბოლოს გაჩნდება ბრძნული აზრები და აფორიზმები. ამ სტრიქონებში ყველას იპოვის რაიმე თავისებური :)
ღირსეულად გაუძელი იმას, რასაც ვერ შეცვლი.
რამდენად მაღიზიანებს ზოგჯერ პროდუქტის ბმულების გრძელი სახელები - თითო სამი სტრიქონი - ან სხვა ბლოკების გრძელი სათაურები. რამდენად კარგი იქნება, თუკი როგორმე შეძლებთ მთლიანობის შეზღუდვას, უფრო კომპაქტურს გახდით მას. და როდესაც მაუსს მიიტანთ, სრულად აჩვენეთ სათაური.
ამისათვის ჩვენი საყვარელი CSS გვეშველება. ძალიან მარტივია, შეხედე.
ვთქვათ, კატალოგის ასეთი ბლოკი გვაქვს საქონლით:
აქ არის მისი სტრუქტურა:
სასწაული იუდოს ელექტრომომარაგების აგენტი არის საღამო, იდუმალი, ხელოვნება. 20255-59 წწშესანიშნავი პროდუქტი სუპერ ფასად, მხოლოდ 100 მანეთი. გააბრწყინეთ თქვენი მარტოხელა საღამოები და გაცოცხლდით ენერგიით!
აქ მოცემულია მისი სტილები:
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)
