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

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

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

Вариант за едноредов текст в CSS

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

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

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

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

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

Box (overflow: hidden; height: 200px; width: 300px; line-height: 25px;) .box:before (content: ""; float: left; width: 5px; height: 200px;) .box > *:first -child (float: дясно; ширина: 100%; margin-left: -5px;) .box:after (content: "\02026"; box-sizing: content-box; float: right; position: relative; top: -25px; ляво: 100%; ширина: 3em; margin-left: -3em; padding-right: 5px; text-align: right; background-size: 100% 100%; background: linear-gradient (надясно, rgba (255, 255, 255, 0), бяло 50%, бяло);)

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

Блок (преливане: скрито; височина: 200px; ширина: 300px;)

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

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

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

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

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

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

(функция ($) ( var truncate = функция (el) ( var text = el . text (), height = el . height (), clone = el . clone (); clone . css (( position : "absolute" , видимост : "скрит", височина : "автоматично" )); 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 и задаваме background-size:

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

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

Пример 2

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

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

Box (позиция: относителна; overflow:hidden; width:300px; height:300px; ) .box img (position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); ширина:300px; височина:300px; object-fit:cover; )

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

Научете повече за HTML и CSS тук:

Пример 3

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

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

Научете повече за HTML и CSS тук:

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

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

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

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

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

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

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

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

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

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

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

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

проблем

Рязането на ъгли е не само бърз начинпостигане на цел, но и популярна опция за стилизиране както в печатния, така и в уеб дизайна. Най-често това включва рязане на един или повече ъгли на контейнера под ъгъл от 45 °. Наскоро, поради факта, че скевоморфизмът започна да губи почва плосък дизайн, този ефект е особено популярен. Когато ъглите са изрязани само от едната страна и всеки ъгъл заема 50% от височината на елемента, това създава форма с форма на стрелка, която също често се използва при проектирането на бутони и навигационни елементи за навигация.

Все още обаче няма достатъчно инструменти в CSS за създаване на този ефект с прости и ясни едноредови решения. Поради това много разработчици са склонни да използват фонови изображения или като покриват изрязаните ъгли с триъгълници (на плътен фон), или като създават целия фон с едно или повече изображения, където ъглите вече са изрязани. Очевидно такива методи са напълно негъвкави, трудни за поддръжка и увеличават латентността поради допълнителни HTTP заявки и общия размер на файла на уебсайта.

Пример за уебсайт, при който изрязаният ъгъл (долния ляв ъгъл на полупрозрачното поле за намиране и резервиране) пасва идеално на дизайна

Решение

един Възможно решениепредложете ни всемогъщите CSS градиенти. Да кажем, че искаме само един изрязан ъгъл, да речем долния десен ъгъл. Номерът е да се възползвате от способността на градиентите да вземете посоката на ъгъла (напр. 45 градуса) и позицията на границите на цветовия преход в абсолютни стойности, които не се променят при промяна на общите размери на елемента, който притежава заден план. От горното следва, че един линеен градиент ще ни бъде достатъчен.

Ще добавим прозрачна граница за избледняване на цвета, за да създадем изрязания ъгъл, и друга граница за избледняване на цвета на същата позиция, но с цвят, съответстващ на фона. CSS кодът ще бъде следният (за ъгъл от 15 пиксела):

фон: #58a;
фон: линеен градиент (-45 градуса, прозрачен 15 пиксела, #58a 0);

Просто, нали? Виждате резултата на снимката.

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

фон: #58a;
фон: линеен градиент (-45 градуса, прозрачен 15 пиксела, #58a 0), линеен градиент (45 градуса, прозрачен 15 пиксела, #655 0);

Това обаче не работи. По подразбиране и двата градиента заемат цялата площ на елемента, така че се затъмняват взаимно. Трябва да ги направим по-малки, като ограничим всеки един до половината от елемента с размер на фона:
фон: #58a;

размер на фона: 50% 100%

Можете да видите резултата на снимката.

Въпреки че приложихме фонов размер, градиентите все още се припокриват. Причината е, че сме забравили да изключим фоновото повторение, така че всеки от фоновете се повтаря два пъти. Следователно единият фон все още закрива другия, но този път поради повторение. Нова версиякодът изглежда така:
фон: #58a;
фон: линеен градиент (-45 градуса, прозрачен 15 пиксела, #58a 0) вдясно, линеен градиент (45 градуса, прозрачен 15 пиксела, #655 0) вляво;
размер на фона: 50% 100%

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

фон: #58a;
фон: линеен градиент (135 градуса, прозрачен 15 пиксела, #58a 0) горе вляво,

линеен градиент (-135 градуса, прозрачен 15 пиксела, #655 0) горе вдясно,

линеен градиент (-45 градуса, прозрачен 15 пиксела, #58a 0) долу вдясно,

линеен градиент (45 градуса, прозрачен 15 пиксела, #655 0) долу вляво;
размер на фона: 50% 50%;
фоново повторение: без повторение;

СЪВЕТ
Използвахме различни цветове (#58a и #655), за да улесним отстраняването на грешки. На практика и двата градиента ще бъдат с един и същи цвят.
Но проблемът с предишния код е, че е труден за поддръжка. Изисква пет редакции за промяна Цвят на фонаи четири за промяна на стойността на ъгъла. Миксин, създаден с препроцесор, може да намали броя на повторенията. Ето как ще изглежда този код в SCSS:
SCSS
@mixin скосени ъгли($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
фон: $bg;
заден план:
линеен градиент (135 градуса, прозрачен $tl, $bg 0)
горе вляво,
линеен градиент (225 градуса, прозрачен $tr, $bg 0)
горе в дясно,
линеен градиент (-45 градуса, прозрачен $br, $bg 0)
долу вдясно,
линеен градиент (45 градуса, прозрачен $bl, $bg 0)
долу вляво;
размер на фона: 50% 50%;
фоново повторение: без повторение;
}

След това, когато е необходимо, може да бъде извикан, както е показано по-долу, с 2–5 аргумента:
SCSS
@включване на скосени ъгли (#58a, 15px, 5px);
В този пример ще завършим с елемент, чийто горен ляв и долен десен ъгъл са подрязани с 15px, а горният десен и долен ляв ъгъл с 5px, подобно на това как работи border-radius, когато посочим по-малко от четири стойности. Това е възможно, защото ние също се грижим за стойностите по подразбиране за аргументи в нашия SCSS mixin - и да, тези стойности по подразбиране могат да се отнасят и за други аргументи.
ОПИТАЙТЕ СЕ!
http://play.csssecrets.io/bevel-corners-gradients

Извити изрязани ъгли

Отличен пример за използване на извити изрязани ъгли на уебсайт http://g2geogeske.comдизайнерът ги е превърнал в централен елемент на дизайна: те присъстват в навигацията, в съдържанието и дори в долния колонтитул.
Вариант на метода на градиента ви позволява да създавате извити изрязани ъгли, ефект, който много хора наричат ​​„радиус на вътрешната граница“, защото изглежда като обърната версия на заоблени ъгли. Единствената разлика е използването на радиални градиенти вместо линейни:
фон: #58a;
фон: радиален градиент (кръг горе вляво, прозрачен 15px, #58a 0) горе вляво,

радиален градиент (кръг горе вдясно, прозрачен 15px, #58a 0) горе вдясно,

радиален градиент (кръг долу вдясно, прозрачен 15px, #58a 0) долу вдясно,

радиален градиент (кръг долу вляво, прозрачен 15px, #58a 0) долу вляво;
размер на фона: 50% 50%;
фоново повторение: без повторение;

Както при предишната техника, размерът на ъгъла може да се контролира от позициите на границите на цветовия преход, а смесването също може да направи този код по-лесен за поддръжка.

ОПИТАЙТЕ СЕ!
http://play.csssecrets.io/scoop-corners

Решение с вграден SVG и border-image

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

По същия начин, промяната на цвета на фона също изисква четири редакции, а ако включите резервно решение, тогава всичките пет; анимирането на промяна в размера на изрязан ъгъл е невероятно трудно и дори невъзможно в някои браузъри. За щастие, в зависимост от желания резултат, можем да използваме още няколко метода. Един от тях е свързан със синдиката граница-изображениес низов SVG код, в който се генерират ъглите.

Знаейки как работи граница-изображение(ако трябва да опресните тези знания в паметта си, ще намерите подсказка) можете ли вече да си представите как изискваното SVG-код?

Тъй като общите размери не са важни за нас (border-image ще се погрижи за мащабирането, а SVG-чертежите се мащабират перфектно, независимо от размерите - бъдете благословени Векторна графика!), всички размери могат да бъдат приравнени към един, за да се работи с по-удобни и кратки стойности. Стойността на ъгъла на рязане ще бъде равна на единица, а правите страни също ще бъдат равни на единица. Резултат (увеличен за четливост). Кодът, необходим за това, е показан по-долу:
рамка: 15px плътна прозрачна;


width="3" height="3" fill="%2358a">\
\
’);

Имайте предвид, че размерът на стъпката на нарязване е 1. Това не означава 1 пиксел; действителният размер се определя от координатната система на SVG файла (затова нямаме мерни единици). Ако използвахме проценти, тогава ще трябва да приближим 1/3 от изображението с дробна стойност, като 33,34%. Винаги е рисковано да се прибягва до приблизителни стойности, тъй като в различни браузъристойностите могат да бъдат закръглени до различна степен на точност. И като се придържаме към единиците на координатната система на SVG файла, ние си спестяваме главоболието, което идва с цялото това закръгляване.

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

Освен това вероятно сте забелязали, че изрязаните ъгли сега са по-малки, отколкото при предишната техника, и това може да бъде объркващо. В края на краищата ние задаваме ширината на границата на 15px! Причината е, че в градиентното решение тези 15 пиксела са измерени по линията на градиента, която е перпендикулярна на посоката на градиента. Широчината на рамката обаче не се измерва диагонално, а хоризонтално/вертикално.

Усещаш ли към какво водя? Да, да, отново вездесъщата Питагорова теорема, която използвахме активно. Диаграмата на фигурата трябва да изясни ситуацията.

Накратко, за да постигнем същия визуален резултат, имаме нужда от ширина на границата, която е 2 пъти по-голяма от размера, който бихме използвали в метода на градиента. В този случай това ще бъде пиксел, което е най-разумното приближение до 20px, освен ако не сме изправени пред задачата да доближим размера на диагонала възможно най-близо до желаните 15px:

border-image: 1 url('data:image/svg+xml,\

width="3" height="3" fill="%2358a">\

0,2"/>\
’);
фон: #58a;
Въпреки това, както виждате, резултатът не е точно това, което очаквахме.

Къде отидоха нашите старателно изрязани ъгли? Не се страхувай, млад падаван, ъглите са все още там. Веднага ще разберете какво се е случило, ако зададете различен цвят на фона, например #655.
Както показва фигурата по-долу, причината, поради която нашите ъгли са изчезнали, е на заден план: фонът, който дефинирахме по-горе, просто ги закрива. Всичко, което трябва да направим, за да коригираме това неудобство, е да използваме background-clip, за да предотвратим пълзенето на фона под областта на рамката:
рамка: 20px плътна прозрачна;
border-image: 1 url('data:image/svg+xml,\

width="3" height="3" fill="%2358a">\

0,2"/>\
’);
фон: #58a;

Сега проблемът е решен и нашето поле изглежда точно както преди. Плюс това, този път можем лесно да преоразмерим ъглите само с една редакция: просто коригирайте ширината на рамката. Можем дори да анимираме този ефект, защото border-width поддържа анимация!

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

Например използваме радиален градиент от цвят hsla(0,0%,100%,.2) към прозрачен. Остава само един малък проблем за решаване. Ако border-image не се поддържа, тогава резервното решение не се ограничава до липсата на изрязани ъгли. Тъй като фонът е изрязан, пространството между ръба на полето и неговото съдържание ще намалее. За да поправим това, трябва да настроим рамката на същия цвят, който използваме за фон:
рамка: 20px плътна #58a;
border-image: 1 url('data:image/svg+xml,\

width="3" height="3" fill="%2358a">\
\
’);
фон: #58a;
background-clip: padding-box;

В браузърите, където нашата дефиниция граница-изображениесе поддържа, този цвят ще бъде игнориран, но където border-image не работи, допълнителният цвят на границата ще осигури по-елегантно резервно решение. Единственият му недостатък е увеличаването на броя на редакциите, необходими за промяна на цвета на фона до три.
ОПИТАЙТЕ СЕ!
http://play.csssecrets.io/bevel-corners

Решение за изрязване на пътя

Въпреки че решението за изображение на граници е много компактно и следва добре принципите на DRY, то идва с някои ограничения. Например нашият фон все още трябва да бъде изцяло или поне запълнен с плътен цвят по краищата.

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

Запомни собствеността клип пътот тайната "Как да си направим ромб"? CSS изрязващите пътеки имат невероятно свойство: те ви позволяват да смесвате процентни стойности (които използваме, за да посочим общите размери на даден елемент) с абсолютни стойности, осигурявайки невероятна гъвкавост. Например кодът за изрязваща пътека, която изрязва елемент във формата на скосен правоъгълник от 20px (измерен хоризонтално), изглежда така:
фон: #58a;
клип-път: полигон(
20px 0, calc(100% - 20px) 0, 100% 20px,
100% calc(100% - 20px), calc(100% - 20px) 100%,
20px 100%, 0 calc(100% - 20px), 0 20px);
Макар и кратък, този кодов фрагмент не следва принципите на DRY и това се превръща в един от най-големите проблеми, ако не използвате препроцесор. Всъщност този код е най-добрата илюстрация на принципа WET от всички чисти CSS решения, представени в тази книга, защото изисква осем (!) редакции за промяна на размера на ъгъла.

От друга страна, фонът може да се промени само с една редакция, така че имаме поне това. Едно от предимствата на този подход е, че можем да използваме абсолютно всеки фон или дори заместващи елементи за изрязване, като например изображения. Фигурата показва изображение, стилизирано с изрязани ъгли. Нито един от предишните методи не може да постигне такъв ефект. В допълнение, свойството clip-path поддържа анимация и можем да анимираме не само промяната в размера на ъгъла, но и прехода между различни форми.

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

ОПИТАЙТЕ СЕ!
http://play.csssecrets.io/bevel-corners-clipped

БЪДЕЩИ ИЗРЕЗАНИ ЪГЛИ
В бъдеще няма да се налага да прибягваме до CSS градиенти, изрязване или SVG, за да постигнем ефекта на изрязаните ъгли. Нов имот ъглова форма,включен в CSS фонове и граници ниво 4 , ще ни спести това главоболие.Той ще се използва за създаване на ефект на изрязани ъгли в различни форми, в комбинация със свойството border-radius, което е необходимо за определяне на количеството на изрязване. Например, за да се опишат 15px изрязани ъгли от всички страни на изображение, този прост код би бил достатъчен:

радиус на границата: 15px;
ъглова форма: фаска;

Прочетете също

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

Има просто CSS решение за това. Ползване на имота текст-препълване: многоточие , което ви позволява да изрежете низ с дълъг тест. За да работи това решение, трябва да посочите ширината на родителския блок и да имате свойството препълване равен скрит или клип .

Решение за едноредов текст:

Box-text ( text-overflow: многоточие; //изображение на дълги полета с текстово препълване: скрито; //скриване на преливащ текст ширина: 100%; //ширина на полето с текст white-space: nowrap; //забрана на опаковане текст)

Цялото им оборудване и инструменти бяха живи, под една или друга форма.

Цялото им оборудване и инструменти бяха живи, под една или друга форма.

Решение за многоредов текст:

Но за да изрежете многоредов текст в CSS, трябва да прибягвате до псевдоелементи :преди И :след .

Box-text ( overflow: hidden; height: 200px; line-height: 25px; ) .box-text:before ( content: ""; float: left; width: 5px; height: 200px; ) .box-text > * :first-child ( float: дясно; ширина: 100%; margin-left: -5px; ) .box-text:after ( content: "\02026"; box-sizing: content-box; float: дясно; позиция: относително; горе: -25px; ляво: 100%; ширина: 3em; margin-left: -3em; padding-right: 5px; text-align: right; background-size: 100% 100%; background: linear-gradient( вдясно, rgba(255, 255, 255, 0), бяло 50%, бяло); )

Лявата страна на гората беше тъмна, в сянка; дясната, мокра, лъскава, лъщеща се на слънце, леко поклащаща се от вятъра. Всичко беше в разцвет; славеите чуруликаха и се търкаляха ту близо, ту далече.

Лявата страна на гората беше тъмна, в сянка; дясната, мокра, лъскава, лъщеща се на слънце, леко поклащаща се от вятъра. Всичко беше в разцвет; славеите чуруликаха и се търкаляха ту близо, ту далече.