Как да изрежете дълъг текст с CSS. Изрязване на един или многоредов текст по височина с добавяне на елипси Добавяне на градиент към текста

Влад Мержевич

Въпреки факта, че мониторите с големи диагонали стават все по-достъпни и тяхната разделителна способност непрекъснато нараства, понякога възниква задачата в ограничено пространство да се побере много текст. Например, това може да е необходимо за мобилната версия на сайта или за интерфейс, където броят на редовете е важен. В такива случаи има смисъл да се съкратят дълги редове от текст, оставяйки само началото на изречението. Така че ще доведем интерфейса до компактна форма и ще намалим количеството показвана информация. Действителното изрязване на редове може да се извърши от страна на сървъра с помощта на същия PHP, но чрез CSS е по-лесно, освен това винаги можете да покажете целия текст, например, когато задържите курсора на мишката върху него. След това ще разгледаме методите как да изрежете текста с въображаеми ножици.

Всъщност всичко се свежда до използването на свойството за препълване със скритата стойност. Разликите се крият само в различното показване на нашия текст.

Използване на препълване

За да може свойството за препълване да се покаже с текста в целия му блясък, трябва да отмените обвиването на текст с помощта на бяло пространство със стойността nowrap. Ако това не бъде направено, тогава ефектът, от който се нуждаем, няма да бъде, към текста ще бъде добавено тирета и той ще бъде показан в неговата цялост. Пример 1 показва как да изрежете дълъг текст с определен набор от свойства на стил.

Пример 1.препълване за текст

HTML5 CSS3 IE Cr Op Sa Fx

Резултатът от този пример е показан на фиг. 1.

Ориз. 1. Тип текст след прилагане на свойството за препълване

Както можете да видите от фигурата, има само един недостатък като цяло - не е очевидно, че текстът има продължение, така че потребителят трябва да бъде наясно с това. Това обикновено се прави с градиент или многоточие.

Добавяне на градиент към текста

За да стане по-ясно, че текстът вдясно не свършва, можете да го наслагвате с градиент от прозрачен към цвят на фона (Фигура 2). Това ще създаде ефект на постепенно разтваряне на текста.

Ориз. 2. Градиентен текст

Пример 2 показва как да създадете този ефект. Стилът на самия елемент на практика ще остане същият, самият градиент ще бъде добавен с помощта на :: след псевдоелемента и CSS3. За да направите това, вмъкваме празен псевдоелемент през свойството content и прилагаме градиент към него с различни префикси за основните браузъри (пример 2). Ширината на градиента може лесно да се променя чрез ширината, можете също да регулирате степента на прозрачност, като замените стойността на 0,2 със своя собствена.

Пример 2. Градиент върху текст

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Вътрешно-дискретното арпеджио трансформира полиреда, това е вертикална една стъпка в ултра-полифонична тъкан.

Този метод не работи в Internet Explorer до и включително 8.0, тъй като не поддържа градиенти. Но можете да се откажете от CSS3 и да направите градиента по старомоден начин, като използвате изображение PNG-24.

Този метод работи само с плътен фон, а в случай на фоново изображение, градиентът върху текста ще бъде поразителен.

Многоточие в края на текста

Можете също да използвате многоточие вместо градиент в края на изрязания текст. Освен това той ще бъде добавен автоматично с помощта на свойството text-overflow. Разбира се от всички браузъри, включително по-старите версии на IE, и единственият недостатък на това свойство е все още неясното му състояние. Изглежда, че това свойство е включено в CSS3, но кодът с него не преминава проверка.

Пример 3 показва използването на свойството text-overflow със стойността ellipsis, която добавя многоточие. Когато задържите курсора на мишката върху текста, той се показва в неговата цялост и се маркира с фонов цвят.

Пример 3. Използване на text-overflow

HTML5 CSS3 IE Cr Op Sa Fx

Резултатът от този пример е показан на фиг. 3.

Ориз. 3. Текст с многоточия

Голям плюс на тези методи е фактът, че градиентът и многоточието не се показват, ако текстът е кратък и изцяло се вписва в посочената област. Така текстът ще се показва както обикновено, когато е изцяло видим на екрана и ще бъде изрязан, когато ширината на елемента бъде намалена.

В някои случаи съдържанието на блока се показва извън границите на елемента, припокривайки се с него. Свойството overflow се използва за управление на поведението на блоковите елементи, което определя как трябва да се показва съдържанието, което тече извън блока.

Използвайки свойството clip, можете да изрежете елемент до посочените размери.

1. Свойството на преливане

Съдържанието на блоковите елементи може да препълни блока, когато височината и/или ширината са изрично зададени за блока. Без да посочва височина, полето ще се разтегне, за да побере съдържанието, освен ако кутията не е позиционирана позиция: абсолютна; или позиция: фиксирана; ... Текстът може да прелива блока по височина, изображенията - по височина и ширина.

2. Свойството overflow-x

Свойството определя как десният край на съдържанието вътре в блока ще бъде отрязан в случай на препълване.

Синтаксис:

Div (overflow-x: hidden;)

3. Свойството overflow-y

Свойството указва как долният край на съдържанието вътре в блока ще бъде отрязан, ако прелее.

Синтаксис:

Div (overflow-y: hidden;)

4. Свойството на клипа

Свойството определя коя част от елемента ще бъде видима. Частта от елемента, която остава видима след изрязване, се нарича област на изрязване. Изрязването се прилага към елемент, който първоначално е напълно видим. Свойството се прилага за елементи, които имат свойството позиция, зададено на абсолютно или фиксирано.

Има текст с произволна дължина, който трябва да бъде показан в блок с фиксирана височина и ширина. В този случай, ако текстът не се побира напълно, трябва да се покаже част от текста, която напълно се вписва в посочения блок, след което се задава многоточие.

Тази задача е доста често срещана, но в същото време не е толкова тривиална, колкото изглежда.

Опция за едноредов текст в CSS

В този случай можете да използвате свойството text-overflow: ellipsis. В този случай контейнерът трябва да притежава свойството препълванеравни скритили клип

Блок (ширина: 250px; бяло пространство: nowrap; преливане: скрит; текстово преливане: многоточие;)

Опция за многоредов CSS текст

Първият начин за изрязване на многоредов текст с помощта на CSS свойства е прилагането на псевдоелементи : предии : след... Първо, HTML маркиране

А сега и самите имоти

Box (препълване: скрито; височина: 200px; ширина: 300px; височина на линията: 25px;) .box: преди (съдържание: ""; float: вляво; ширина: 5px; височина: 200px;) .box> *: първо -child (float: вдясно; ширина: 100%; margin-left: -5px;) .box: след (съдържание: "\ 02026"; box-sizing: content-box; float: вдясно; позиция: относителна; отгоре: -25px; вляво: 100%; ширина: 3em; margin-left: -3em; padding-right: 5px; подравняване на текст: вдясно; размер на фона: 100% 100%; фон: линеен градиент (вдясно, rgba (255, 255, 255, 0), бяло 50%, бяло;)

Друг начин е да използваме свойството column-width, с което задаваме ширината на колоната за многоредов текст. Въпреки това, когато използвате този метод, няма да получите многоточие в края. HTML:

Блок (препълване: скрит; височина: 200px; ширина: 300px;) .block__inner (-webkit-column-width: 150px; -moz-column-width: 150px; ширина на колона: 150px; височина: 100%;)

Третото решение за многоредов текст в CSS е за браузъри Webkit... В него ще трябва да използваме няколко специфични свойства с префикса - уебкит... Основният е -webkit-line-clamp, който ви позволява да зададете броя на редовете за показване в блок. Решението е красиво, но доста ограничено поради работата му в ограничена група браузъри

Блок (препълване: скрито; текстово преливане: многоточие; дисплей: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: вертикално;)

Вариант на JavaScript за многоредов текст

Тук се използва допълнителен невидим блок, в който първоначално се поставя нашият текст, след което по един знак се премахват, докато височината на този блок стане по-малка или равна на височината на желания блок. И в края текстът се премества в оригиналния блок.

var block = документ. querySelector (.block"), текст = блок. innerHTML, клонинг = документ. createElement ("div"); клонинг. стил. позиция = "абсолютна"; клонинг. стил. видимост = "скрит"; клонинг. стил. ширина = блок. ширина на клиента + "px"; клонинг. innerHTML = текст; документ. тяло. appendChild (клонинг); var l = текст. дължина - 1; за (; l> = 0 && clone. clientHeight> block. clientHeight; - l) (clone. innerHTML = text. substring (0, l) + "...";) блок. innerHTML = клонинг. innerHTML;

Това е под формата на jQuery плъгин:

(функция ($) (var truncate = функция (el) (var text = el. text (), височина = el. височина (), clone = el. clone (); клон. css ((позиция: "абсолютен", видимост: "скрит", височина: "автоматично")); el. след (клониране); var l = текст. дължина - 1; за (; l> = 0 && клониране. височина ()> височина; - l) ( клон. текст (текст. подниз (0, l) + "...");) ел. текст (клонинг. текст ()); клониране. премахване ();); $. fn. truncateText = функция () ( върнете това. Всеки (функция () (съкрати ($ (това));)););) (jQuery));

Здравейте всички, казвам се Анна Блок и днес ще говорим за това как да изрежете изображения, без да използвате графични програми.

Къде може да ви бъде полезно това?

На първо място, на сайтове, където съдържанието с изображения най-вероятно няма да бъде изрязано към конкретен блок.

Ярък пример: WordPress блог.

Да приемем, че искате корицата на статията ви да бъде 1: 1 (квадрат). Вашите действия:

1. Изтеглете подходяща снимка от интернет;
2. Изрежете го във Photoshop до желаната пропорция;
3. Публикувайте статията си.

След като влезете в сайта, ще видите резултата, който очаквате.

Но да предположим, че сте забравили да изрежете снимка във Photoshop и да качите произволно изображение като корица от интернет, какво ще се случи тогава?! Точно така, оформлението ще се счупи. И ако изобщо не сте използвали CSS, тогава картината с HD разделителна способност може напълно да припокрие целия изглед на текста. Ето защо е важно да можете да изрязвате изображения с помощта на CSS стилове.

Нека разгледаме различни ситуации как това може да бъде реализирано не само с CSS, но и със SVG.

Пример 1

Нека се опитаме да изрежем изображението, което е поставено с фоново изображение. Нека създадем малко HTML маркиране

Преминаваме към стилизиране на CSS. Използвайки background-image, добавете изображението, задайте границите за нашето изображение, центрирайте изображението с помощта на background-position и задайте размера на фона:

Jpg); позиция на фона: център център; фон-размер: корица; ширина: 300px; височина: 300px; )

Това беше първият и най-лесният метод за изрязване на изображение. Сега нека разгледаме втори пример.

Пример 2

Да предположим, че имаме същия контейнер кутия, вътре в който има етикет img с изображение, което ще стилизираме сега.

Ние също така ще поставим нашето изображение центрирано спрямо обекта, който ще създадем. И ние използваме свойство, което се използва рядко: object-fit.

Box (позиция: относителна; преливане: скрита; ширина: 300px; височина: 300px;) .box img (позиция: абсолютна; отгоре: 50%; ляво: 50%; трансформиране: превод (-50%, - 50%); ширина: 300px; височина: 300px; прилягане на обекта: корицата;)

Това е най-добрият метод според мен. Той е идеален за блогове, ако използвате изображения за публикациите си в много различни пропорции.

Можете да прочетете повече за HTML и CSS тук:

Пример 3

Можем също да създадем изрязване за изображения в момента, ако ги вмъкнем в SVG елементи. Да вземем за пример кръг. Можем да създадем SVG с помощта на тагове. Създайте граничен svg маркер, вътре в който ще има маркер с кръг и маркер за шаблон. В маркера на шаблона напишете маркера за изображение. В него посочваме атрибута xlink: href и добавяме изображение. Ще добавим и атрибутите ширина и височина. Но това не е всичко. Ще трябва да добавим стойност за запълване. За да завършим работата си, ще добавим спомагателен атрибут за запазване на аспекта към етикета на изображението, който ще запълни нашето изображение "от и до" около кръга.

Не мога да нарека този метод универсален. Но може да се използва в изключителни случаи. Например, ако засегнем темата за блог, тогава в идеалния случай такъв метод може да се впише в аватара на автора, който пише статията.

Можете да прочетете повече за HTML и CSS тук:

Резултати:
Разгледахме 3 метода за изрязване на изображение на уебсайтове: използване на фоново изображение с помощта на етикета img и свързване със svg шаблона с вграждане на растерни изображения с помощта на етикета за изображение. Ако знаете други методи за изрязване на изображение с помощта на SVG, споделете ги в коментарите. Ще бъде полезно не само за мен, но и за другите да научат за тях.

Не забравяйте да зададете вашите въпроси за кодиране или разработка на front-end на професионалистите във FrontendHelp онлайн.

В тази статия ще ви разкажем за 3 бързи и лесни CSS техникикоито можете да използвате, за да покажете само част от картината на вашата страница.

Всички методи, използвани тук, всъщност се нуждаят само от няколко реда CSSкод. Това обаче не е обрязване в буквалния смисъл на думата ( CSSвсе още не мога да го направя), просто скриваме и показваме само тази част от картината, която искаме да видим.

Тези техники могат да бъдат много полезни, ако искате да доведете картина до определен размер, тоест искате да създадете например нейно миниатюрно изображение (умалено копие на изображението) в секцията за новини или нещо подобно.

Техника 1 - Използване на отрицателни маржове ( Отрицателни маржове)

Ако не искате да използвате отрицателни маржове, предлагаме да използвате техниката №2 ... Той включва родител (параграф), който има конкретна ширина и височина. Този параграф има свойството позициониранепосочени като относителни. Ширината и височината определят размерите на показаното поле. И снимката, поставена вътре в абзаца, има свойството позиционираненастроен на абсолютно. След това можем да използваме свойствата отгоре (отгоре)и налявоподредете картината както искаме, като в процеса определяме: коя част от изображението да се покаже и коя - не.

HTMLидентичен с кода от предишната техника:

Техника 3 - Използване на свойството на нарязване ( Clip Property)

Тази техника трябва да е най-лесната, т.к свойство на клипадефинира частта от елемента, която да бъде показана. Звучи като перфектно решение, но има една пречка: подрязан елементтрябва да се позиционира абсолютно. За да можем да използваме елемент, трябва да добавим допълнителен елемент, да изчислим размера на видимата област на изображението, да добавим този размер към родителския, да използваме родителя... Много работа, нали то?

О, още един проблем: размерът на изрязания елемент не се намалява до размера на изрязването, а остава оригиналния размер (картинката извън изрязването е просто скрита). Трябва да използваме абсолютно позициониране, за да преместим изгледа в горния ляв ъгъл на родителя.

Въпреки това, човек не може да остане неспомен свойство на нарязване... И така отново кодът...