იგი იქმნება div div-ით შეკუმშვის საათის განმავლობაში. როგორ დავჭრათ გრძელი რიგი რამდენიმე სიმბოლოს css და js ამოცანების გადასაჭრელად. ჩამოაყალიბეთ ტექსტი სიმბოლოების რაოდენობის მიხედვით და დაამატეთ ლაქა თარიღისგან დამოუკიდებლად

საბოლოო ტექსტში ლაქის დამატება შესაძლებელია ჩვენი css და js თანმიმდევრობით ეტიკეტებით.

პირველად გადავხედოთ ამოცანებს. Є ბლოკის განლაგება

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

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

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

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

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

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

Რას ვაკეთებთ?

სკრიპტისთვის აუცილებელია, როგორ უნდა დამუშავდეს თავად ელემენტები.
ამ მწკრივისთვის var elem = document.getElementsByClassName("tit"); მითითებულია ელემენტის კლასი (ღვინო შეიძლება იყოს იგივე).

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

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

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

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

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

ვარიანტი ერთი რიგის CSS ტექსტისთვის

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

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

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

ციტატებიდან მდიდარი ტექსტის ამოჭრის პირველი გზა CSS სიმძლავრეშეაჩერე ფსევდოელემენტები : ადრეі : შემდეგ. Cob HTML მარკირებაზე

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

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

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

ბლოკი (გადინება: დამალული; სიმაღლე: 200 პიქსელი; სიგანე: 300 პიქსელი;) .block__inner ( -webkit-column-width: 150px; -moz-column-width: 150px; 0:0:

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

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

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

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

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

იხილეთ დანამატი jQuery-სთვის:

(ფუნქცია ($) (var truncate = ფუნქცია (el) (var text = el. text (), სიმაღლე = el. სიმაღლე (), კლონი = el. კლონი (); კლონი . css (( პოზიცია: "აბსოლუტური", ხილვადობა: "დამალული", სიმაღლე: "ავტო")), el.after (კლონი); (კლონი. ტექსტი (ტექსტი. ქვესტრიქონი (0, l) + "..."); ) ელ. ტექსტი (კლონი. ტექსტი ()); კლონირება .წაშლა ();$ .fn .truncateText = ფუნქცია () ( დააბრუნეთ ეს .teach (ფუნქცია () ( truncate ($(this)); )); )(jQuery));

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

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

1. დენის გადინება

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

2. დენის გადინება-x

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

Სინტაქსი:

Div (გადინება-x: დამალული;)

3. დენის გადინება-y

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

Სინტაქსი:

Div (გადინება-y: დამალული;)

4. დენის კლიპი

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

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

ვიკორისტანის აქ სასარგებლო მეთოდები, ფაქტობრივად, ფსონის რიგზე მეტს მოითხოვს cssკოდი. თუმცა, ეს არ არის გააზრებული პირდაპირი გაგებით ( cssამ დროისთვის, ჩვენ ვერაფერს ვაკეთებთ), ჩვენ მხოლოდ სურათის მხოლოდ ის ნაწილის ჩვენება გვინდა, yaku mi მინდა დატკბობა.

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

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

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

HTMLწინა აღჭურვილობის კოდის იდენტურია:

ტექნიკა 3 - თხრობის ძალის მოგება ( კლიპის საკუთრება)

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

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

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

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

რომლისთვისაც CSS გადაწყვეტა მარტივია. ძალაუფლების გამარჯვება ტექსტი-გადინება: ელიფსი რომელიც საშუალებას გაძლევთ გაჭრათ რიგი გრძელი ცომით. Იმისთვის რომ მიღებული გადაწყვეტილებასაჭირო იყო ბატკოვის ბლოკის სიგანე და ძალაუფლების დედა გადინება თანაბრად დამალული ან კლიპი .

გამოსავალი ერთი ხაზის ტექსტისთვის:

Box-text (ტექსტის გადასასვლელი: ელიფსისი; //ტექსტური ველების გახსნა: დამალული; //მიიღეთ ტექსტის სიგანე გადასასვლელად: 100%; //ტექსტური ველის სიგანე თეთრი სივრცე: nowrap; //ღობე გადატანილ ტექსტზე)

მთელი მათი ქონება და ხელსაწყო ცოცხალი იყო, საკუთარი სახით.

გამოსავალი მდიდარი ტექსტისთვის:

ალმა CSS-ში მდიდარი ტექსტის ამოსაჭრელად მოგიწევთ ფსევდოელემენტების დახმარება : ადრე і : შემდეგ .

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

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