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

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

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

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

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

HTMLидентичен с кода на предишното оборудване:

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

Техниката Tsya може да бъде лесна, така че свойство на клипаИзберете част от елемента, която трябва да бъде показана. Звучи като цялостно решение, ale є една пречка: изрязан (подрязан) елементможе да се позиционира абсолютно. За да можем да спечелим елемент, трябва да добавим допълнителен елемент, да изчислим размера на видимата площ на изображението, да добавим размера на бащата, да оставим бащата на студа ... Koopa roboti , защо не?

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

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

Mi zavzhdi wanto, schob в сайта всичко беше точно, но например имате блокове с текст, който трябва да въведете в първия ред на mezhі, можете да имате обявление преди статията или описанието на продукта. Ако е така, текстът може да е достатъчен. Очевидно можете за постоянно да промените текста, за да разширите полето, така че нищо да не липсва, но можете да го разработите, така че текстът да се зареди.

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

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

Box-text (text-overflow: ellipsis; //препълване на текстови полета: скрити; //получаване на ширина на текста, за да надхвърли: 100%; //ширина на текстовото поле бяло пространство: nowrap; //ограда за прехвърлен текст)

Всичките им притежания и инструменти бяха живи, в своя собствена форма.

Решение за богат текст:

Ale за изрязване на богат текст в CSS ще трябва да влезе в помощ на псевдоелементи :преди і :след .

Box-text ( overflow: hidden; височина: 200px; line-height: 25px; ) .box-text:before ( content: ""; float: вляво; ширина: 5px; височина: 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; подравняване на текст: вдясно; размер на фона: 100% 100%; вдясно, rgba(255 , 255, 255, 0), бяло 50%, бяло);

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

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

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

Всъщност всичко е сведено до нивото на препълване със скрити стойности. Vіdmіnnostі lich kryutsya vіzny vіdobrazhennі нашия текст.

Преливане на победата

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

Бут 1. преливане за текст

HTML5 CSS3 IE Cr Op Sa Fx

Резултат това дупепоказано на фиг. един.

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

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

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

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

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

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

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

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

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

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

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

Багатокрапка в кратък текст

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

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

Пример 3. Препълване на текст за победа

HTML5 CSS3 IE Cr Op Sa Fx

Резултатът от това свидетелство на фиг. 3.

Ориз. 3. Текст с тройни петна

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

Добавянето на петънце в крайния текст може да бъде постигнато чрез стикери в нашия css и js ред.

За първи път нека да разгледаме задачите. Є блоково оформление

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

Изрязване на текст css

За когото създаваме стил за класа синигер
.tit(
бяло пространство: nowrap; /* Отнася се до обвиване на текст */
преливане: скрито; /* Изрежете на място */
допълване: 5px /* Полета */
текст-препълване: многоточие; /* Richpoint */
}

Особеността на това решение се крие във факта, че ако текстът е поставен в размера на блока, тогава петното няма да бъде добавено. Какво не е решението на задачата.

Най-често е необходимо да изрежете текста за първи път и по-малко от секунда да добавите петънце.
Също така задачите се записват, ако е необходимо да се добавят петънца във всеки случай (без допълнителен текст, дори 3 букви). И ако текстът е завършен за пеещ rozmіr, тогава е необходимо да го изрежете. В този случай е необходимо да използвате скрипта.

Формирайте текста според броя на символите и добавете петънце независимо от датата

Какво правим?

За скрипта е необходимо как самите елементи трябва да бъдат обработени.
За този ред var elem = document.getElementsByClassName("tit"); класът на елемента е посочен (виното може да е същото).

След това е необходимо да зададете размера на текста преди изрязване. Всички наши къси редове, към които ще бъде добавена bagatokrapka. За цената на промяната var size = 75;

Сега скриптът е длъжен да премине през всички елементи с необходимия клас и да постави знак.
Скриптът пренаписва дължината на линията на кожата и преоформя текста, като по този начин пренаписва 75 знака. Ако е малко по-малко, тогава просто са добавени три петна (ред if(elem[i].innerHTML.length > size)).

Можете да разгледате работата на скрипта от демонстрационната страна. Защо, сега знаете как да изрежете дълъг текст с различни методи.