შექმენით ყუთი სენსორული ტექსტით CSS და HTML- ის გამოყენებით
HTML გრაგნილი ყუთი არის ყუთი, რომელიც დასძენს გადახვევა ბარები მარჯვენა მხარეს და ქვედა, როდესაც შინაარსი ყუთში უფრო დიდია, ვიდრე ყუთი ზომები. სხვა სიტყვებით რომ ვთქვათ, თუ თქვენ გაქვთ ყუთი, რომელიც შეიძლება 50 სიტყვას შეესაბამებოდეს და 200 სიტყვის ტექსტი გაქვთ, HTML Scroll ყუთი დააყენებს გადახურვის ბარსას, რათა დამატებით 150 სიტყვა მოგეჩვენოთ. სტანდარტული HTML, რომელიც უბრალოდ დააყენებს დამატებით ტექსტს გარეთ ყუთში.
მიღების HTML გადახვევა საკმაოდ მარტივია. თქვენ უბრალოდ უნდა დააყენოთ ელემენტის სიგანე და სიმაღლე, რომლითაც გსურთ გადახვიდეთ და შემდეგ გამოიყენოთ CSS overflow ქონების დადგენა, თუ როგორ გსურთ სენსორული მოხდეს.
რა უნდა გავაკეთოთ დამატებითი ტექსტი?
როდესაც უფრო მეტი ტექსტი გაქვთ, ვიდრე შეესაბამება თქვენს განლაგებას, გაქვთ რამდენიმე ვარიანტი:
- გადაწერა ტექსტი ისე, რომ ის მოკლეა და შეესაბამება.
- ნება დართეთ ტექსტს საზღვრების მიღმა და იმედი მაქვს, რომ განლაგება ხელს უწყობს მას მხარი დაუჭიროს.
- შეწყვიტე ტექსტი, სადაც ის overflows.
- სანიშნეს scroll ბარები (როგორც წესი, ვერტიკალური ტექსტი) ისე, რომ სივრცეში scrolls რათა ნახოთ დამატებითი ტექსტი.
საუკეთესო ვარიანტი, როგორც წესი, ბოლო ვარიანტი: შექმნათ სენსორული ტექსტური ყუთი. შემდეგ დამატებით ტექსტი შეიძლება წაიკითხოთ, მაგრამ თქვენი დიზაინი არ არის კომპრომეტირებული.
HTML და CSS ეს იქნება:
Overflow: auto; ეუბნება ბრაუზერი დაამატოთ გადახვევა ბარები, თუ ისინი საჭირო შენარჩუნება ტექსტის overflowing საზღვრები div. მაგრამ იმისათვის, რომ მუშაობა, თქვენ ასევე უნდა სიგანე და სიმაღლე სტილის თვისებები მითითებული div, ისე, რომ არსებობს საზღვრები overflow.
თქვენ ასევე შეგიძლიათ შეწყვიტოთ ტექსტის შეცვლის შეცვლით: ავტო; overflow: ფარული ;. თუ დატოვებთ outflow ქონება, ტექსტი დაღვრაზე მეტი საზღვრები div.
შეგიძლიათ დამატება Scroll ბარები ზე მეტი უბრალოდ ტექსტი
თუ თქვენ გაქვთ დიდი სურათი, რომელიც გსურთ უფრო პატარა სივრცეში გამოჩნდეს, შეგიძლიათ დაამატოთ სრულის ბარები, ისევე როგორც ტექსტით.
ამ მაგალითში 400x509 სურათი 300x300 პარაგრაფშია.
მაგიდები შეიძლება ისარგებლოს Scroll ბარები
ინფორმაციის დიდი ხნის მანძილზე შეიძლება ძალიან რთულად წაიკითხოს, მაგრამ შეზღუდული ზომის განყოფილებაში შეყვანისას და შემდეგ დამატებით დაფარავს ქონებას, შეგიძლიათ მიიღოთ ცხრილები უამრავი მონაცემებით, რომლებიც თქვენს გვერდზე არ აისახება უკიდურეს სივრცეში .
უმარტივესი გზაა სურათებისა და ტექსტების მსგავსად, დაამატეთ div- ს გარშემო მაგიდა, დაამატეთ ამ div სიგანე და სიმაღლე და დაამატეთ overflow ქონება:
| სახელი | ტელეფონი | ||||
|---|---|---|---|---|---|
| Jennifer | 502-5366 .... ერთი რამ, რაც ხდება, როდესაც ეს ჰორიზონტალური გრაგნილი ბარი ჩვეულებრივ ჩნდება, ვინაიდან ბრაუზერი ვარაუდობს, რომ სრულის ბრინჯის ქრომი მაგიდას გადაფარავს. ბევრი გზა არსებობს იმისათვის, რომ ეს შეცვალოს მაგიდის სიგანე და სხვები. მაგრამ ჩემი საყვარელია უბრალოდ გამორთეთ ჰორიზონტალური სენსორული ერთად CSS 3 ქონება overflow-x. უბრალოდ დაამატეთ overflow-x: hidden; რომ div, და რომ ამოიღონ ჰორიზონტალური გადახვევა ბარი. დარწმუნდით, რომ შეამოწმოთ ეს, როგორც შეიძლება იყოს შინაარსი, რომელიც გაქრება. Firefox მხარს უჭერს გამოყენებით TBODY Tags OverflowFirefox- ის ბრაუზერის მართლაც კარგი ფუნქციაა ისიც, რომ თქვენ შეგიძლიათ გამოიყენოთ overflow ქონება შიდა მაგიდაზე, როგორიცაა tbody და thead ან tfoot. ეს იმას ნიშნავს, რომ თქვენ შეგიძლიათ დააყენოთ სლალო ბარები მაგიდის შინაარსზე და თავსახური უჯრედები დარჩებიან მათზე მაღლა. ეს მუშაობს მხოლოდ Firefox- ზე , რომელიც ძალიან ცუდია, მაგრამ ეს კარგი ფუნქციაა, თუ მკითხველს მხოლოდ Firefox- ის გამოყენება შეუძლია. იხილე ამ მაგალითში Firefox- ში და რას ვგულისხმობ.
|