ბლოკის მოწყვეტის ნაცვლად ჩნდება ჩრდილები. როგორ გამოვიყენოთ CSS გრძელი ტექსტის მოსაჭრელად. რისი გვეშინია?

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

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

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

ვიკორისთამო გადადინება

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

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

HTML5 CSS3 IE Cr Op Sa Fx

კონდახზე მოცემული წაკითხვის შედეგი ნახ. 1.

Პატარა 1. ტექსტის ხედი დენის გადინების შეწყვეტის შემდეგ

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

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

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

Პატარა 2. ტექსტი გრადიენტით

აპლიკაცია 2 აჩვენებს შექმნის ეფექტს. თავად ელემენტის სტილი პრაქტიკულად ზედმეტი იქნება, მაგრამ თავად გრადიენტი დაემატება დამატებითი ფსევდო ელემენტის ::after და 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. Wikostannya text-overflow

HTML5 CSS3 IE Cr Op Sa Fx

კონდახზე მოცემული წაკითხვის შედეგი ნახ. 3.

Პატარა 3. ტექსტი სამი წერტილით

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

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

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

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

ამ გზით, თქვენ შეგიძლიათ vikorystvuvat Power text-overflow: ellipsis. ამ შემთხვევაში კონტეინერი დედის სიმძლავრის დამნაშავეა გადინებარივნე დამალულიან კიდევ კლიპი

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

CSS-ში მდიდარი ტექსტის ვარიანტი

გრძელი ტექსტის მოჭრის პირველი გზა არის Wikoristanny CSSხელისუფლება სტაგნაცია და ფსევდოელემენტები : ადრეі : შემდეგ. დამწყებთათვის HTML განლაგება

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

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

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

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

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

ბლოკი (გადინება: დამალული; ტექსტი-გადინება: ელიფსისი; ჩვენება: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: ვერტიკალური;)

JavaScript-ში მდიდარი ტექსტის ვარიანტი

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

var ბლოკი = დოკუმენტი. querySelector(".block"), text = ბლოკი. innerHTML, კლონი = დოკუმენტი. createElement ("div"); კლონი. სტილი. პოზიცია = "აბსოლუტური"; კლონი. სტილი. ხილვადობა = „დამალული“; კლონი. სტილი. სიგანე = ბლოკი. კლიენტის სიგანე + "px"; კლონი. innerHTML = ტექსტი; დოკუმენტი. სხეული. appendChild (კლონი); var l = ტექსტი. სიგრძე - 1; (; l> = 0 && clone. clientHeight> ბლოკისთვის. clientHeight; - l) (კლონი. innerHTML = ტექსტი. ქვესტრიქონი (0, l) + "...";) ბლოკისთვის. innerHTML = კლონი. innerHTML;

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

(ფუნქცია ($) (var truncate = ფუნქცია (el) (var text = el. ტექსტი (), სიმაღლე = el. სიმაღლე (), კლონი = el. კლონი ()); კლონი. Css ((პოზიცია: "აბსოლუტური" ხილვადობა: "დამალული", სიმაღლე: "ავტო")); el. შემდეგ (კლონი); var l = ტექსტი. სიგრძე - 1; for (; l> = 0 && კლონი. სიმაღლე ()> სიმაღლე; - l) ( კლონირება. ტექსტი (ტექსტი. ქვესტრიქონი (0, ლ) + "...");) ელ. ტექსტი (კლონი. ტექსტი ()); კლონი. წაშლა (); $. fn. truncateText = ფუნქცია () ( დაბრუნება this.each(function()(truncate($(this));));)) (jQuery));

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

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

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

ტექნიკა 1 - უარყოფითი ველების ვიკორასტანია ( უარყოფითი მინდვრები)

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

HTMLმოწინავე ტექნოლოგიის კოდის იდენტურია:

ტექნიკა 3 - ჭრის ძალა ( კლიპის საკუთრება)

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

ოჰ, კიდევ ერთი პრობლემა: დამსხვრეული ელემენტის ზომა არ იცვლება მოსავლის ზომამდე, მაგრამ იკარგება კობის ზომამდე (მოსავლის კიდეების უკან სურათი უბრალოდ იკარგება). ჩვენ უნდა ვიკორისტუვათ აბსოლუტური პოზიციონირება ისე, რომ ხილული ზონა მამის ზედა მარცხენა კუთხეში ჩავარდეს.

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

ტექსტის ბოლოს სამი წერტილის დამატება შესაძლებელია იგივე მეთოდებით, css და js გამოყენებით.

დასაწყებად, მოდით გადავიდეთ საქმეების ბოლოში. Є ბლოკის მარკირება

ახლა თქვენ უნდა მიაღწიოთ ტექსტის ამოჭრის ეფექტს სიის კანის ელემენტში, გარდა ამისა, თქვენ უნდა დაამატოთ სამი წერტილი.

css ტექსტის ამოჭრა

ვისთვისაც ჩვენ ვქმნით სტილს კლასის ტიტისთვის
.ტიტი (
თეთრი სივრცე: nowrap; / * ტექსტზე გადატანის სკანირება * /
გადინება: დამალული; / * მოჭრილი შესაფერისად * /
padding: 5px; /*ველები*/
ტექსტი-გადინება: ელიფსისი; / * სამი ლაქა * /
}

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

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

ჩვენ ვწყვეტთ ტექსტს რამდენიმე სიმბოლოს და ვამატებთ სამ ველს ერთმანეთისგან დამოუკიდებლად

რისი გვეშინია?

ჩვენ ვეუბნებით სკრიპტს, რომელი ელემენტების დამუშავებას საჭიროებს.
რა არის ზედიზედ var elem = document.getElementsByClassName("tit"); მითითებულია ელემენტის კლასი (ბრალია, მაგრამ ახალი).

შემდეგ თქვენ უნდა დააყენოთ ტექსტის ზომა ამოჭრამდე. ყველა ჩვენი მოკლე ხაზი დასრულდება სამი ლაქით. ეს მითითებულია ცვლილება var size = 75;

ახლა სკრიპტმა უნდა გაიაროს ყველა ელემენტი საჭირო კლასით და დადოს ნიშნები.
სკრიპტი ამოწმებს კანის მწკრივის dowzhin-ს და ჭრის ტექსტს, თუ ის აღემატება 75 სიმბოლოს. თუ დოვჟინი უფრო პატარაა, მაშინ უბრალოდ ემატება სამი წერტილი (რიგი if (elem [i].innerHTML.length> ზომა)).

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