Обрізається зміст div при стисканні. Як обрізати довгий рядок за кількістю символів css та js розв'язання задачі. Обрізаємо текст за кількістю символів і додаємо крапку незалежно від довжини
Додавання крапки в кінці тексту можна досягти кількома шляхами, в нашому розпорядженні css і js.
Для початку розберемося у завданні. Є розмітка блоку
- Багато цікавого тексту про стилі, верстку, програмування та ще багато цікавого про сайти
- А як же нам поставити крапку, якщо ми не можемо обмежити блок розміром?
- Як щодо js скрипта? Він же може таке, щоправда
- Хм, точно може. Ось тримай код, він порахує юнікод символи і обріже якщо потрібно
Тепер необхідно досягти ефекту обрізання тексту в кожному елементі списку, на додаток до цього потрібно додати крапку.
Обрізання тексту css
Для цього створимо стиль для класу tit
.tit (
white-space: nowrap; /* Скасуємо перенесення тексту */
overflow: hidden; /* Обрізаємо вміст */
padding: 5px; /* Поля */
text-overflow: ellipsis; /* Багатокрапка */
}
Особливість цього рішення полягає в тому, що якщо текст поміститься в розмір блоку, то крапка не буде додано. Що не є рішенням завдання.
Найчастіше необхідно обрізати текст за його довжиною і лише після цього додати крапки.
Також зустрічаються завдання, коли необхідно в будь-якому випадку додати крапки (без будь-якої довжини текст, хоч 3 літери). А якщо текст довший за певний розмір, то його необхідно обрізати. У цьому випадку потрібно використовувати скрипти.
Обрізаємо текст за кількістю символів і додаємо крапку незалежно від довжини
Що ми робимо?
Вказуємо скрипту, які саме елементи потрібно обробляти.
Для цього у рядку var elem = document.getElementsByClassName("tit"); вказуємо клас елемента (він має бути однаковий).
Потім необхідно встановити розмір тексту до його обрізки. Це наші короткі рядки до яких буде додано багатокрапку. За це відповідає змінна var size = 75;
Тепер скрипт повинен пройти по всіх елементах з потрібним класом і проставити крапку.
Скрипт перевіряє довжину кожного рядка та обрізає текст, якщо його довжина перевищує 75 символів. Якщо довжина менше, то просто додається крапка (рядок if(elem[i].innerHTML.length > size)).
Роботу скрипта ви можете переглянути на demo сторінці. На цьому все тепер ви знаєте як обрізати довгий текст різними методами.
Є текст довільної довжини, який потрібно вивести всередині блоку фіксованої висоти та ширини. При цьому, якщо текст поміщається не повністю, повинен відображатися фрагмент тексту, який повністю поміщається в заданий блок, після чого встановлюється багатокрапка.
Таке завдання є досить поширеним, водночас воно є не таким тривіальним, як здається.
Варіант для однорядкового тексту CSS
В цьому випадку можна використовувати властивість text-overflow: ellipsis. При цьому контейнер повинен мати властивість overflowрівне hiddenабо clip
Block ( width : 250px ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; )
Варіант для багаторядкового тексту на CSS
Перший спосіб обрізати багаторядковий текст із використанням CSS властивостейзастосувати псевдо-елементи :beforeі :after. Для початку HTML-розмітка
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. У wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autom vel eum iriure dolor в hendrerit в vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis на vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue du.
А тепер і самі властивості
Box ( overflow : hidden ; height : 200px ; width : 300px ; line-height : 25px ; ) .box :before ( content : "" ; float : left ; width : 5px ; -child (float : right ; width : 100% ; margin-left : -5px ; ) .box :after (content : "\02026" ; box-sizing : content-box ; float : right ; -25px ;left : 100% ; width : 3em ; margin-left : -3em ; padding-right : 5px ; text-align : right ; background-size : 100% 100% ; background : linear-gradient (r (255, 255, 255, 0), white 50%, white);)
Ще один спосіб - використовувати властивість column-width, за допомогою якого задаємо ширину колонки для багаторядкового тексту. Щоправда, при використанні цього способу встановити в кінці багатокрапка не вийде. HTML:
Block ( overflow : hidden ; height : 200px ; width : 300px ; ) .block__inner ( -webkit-column-width : 150px ; -moz-column-width : 150px ; column-width :1
Третій спосіб рішення для багаторядкового тексту на CSS є для браузерів Webkit. У ньому нам доведеться використовувати відразу кілька специфічних властивостей із префіксом. -webkit. Основним є -webkit-line-clamp, яке дозволяє вказати кількість рядків, що виводяться в блоці. Рішення красиве, але досить обмежене за рахунок своєї роботи в обмеженій групі браузерів.
Block ( overflow : hidden ; text-overflow : ellipsis ; display : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : vertical ; )
Варіант для багаторядкового тексту на JavaScript
Тут використовується додатковий невидимий блок, який спочатку поміщається наш текст, після чого, видаляється по одному символу, поки висота цього блоку стане менше чи дорівнює висоті необхідного блока. І наприкінці текст переміщається у вихідний блок.
var block=document. querySelector (".block"), text = block. innerHTML, clone=document. createElement ("div"); clone. style. position = "absolute"; clone. style. visibility = "hidden"; clone. style. width = block. clientWidth + "px"; clone. innerHTML = text; document. body. appendChild (clone); var l = text. length - 1; for (; l >= 0 && clone . clientHeight > block . clientHeight ; -- l ) ( clone . innerHTML = text . substring (0 , l ) + "..." ; ) block . innerHTML = clone. innerHTML;
Це ж у вигляді плагіна для jQuery:
(function ($) ( var truncate = function ( el ) ( var text = el . text (), height = el . height (), clone = el . clone (); clone . css (( position : "absolute" , visibility : "hidden" , height : "auto" )), el . after (clone ); ( clone . text (text . substring (0 , l ) + "..." ); ) el . text (clone . text ()); clone . remove (); ); $ . fn . truncateText = function () ( return this . each (function () ( truncate ($ (this )); )); ); )(jQuery ));
У деяких випадках вміст блоку відображається поза межами елемента, накладаючись на нього. Для керування поведінкою блокових елементів використовується властивість overflow, яке визначає, як має відображатися вміст, що виходить за межі блоку.
За допомогою властивості clip можна обрізати елемент за заданими розмірами.
1. Властивість overflow
Вміст блокових елементів може переповнювати блок у разі, коли для блоку явно задана висота та/або ширина. Без вказівки висоти блок буде розтягуватися, щоб вміст вмісту, крім випадків, коли для блоку задано позиціонування position: absolute; або position: fixed; . Текст може переповнювати блок по висоті, зображення по висоті та ширині.
| Значення: | |
| visible | Значення за замовчуванням. Весь контент стає видимим, незалежно від розмірів блоку-контейнера. Можливе перекриття вмісту сусідніх блоків. |
| scroll | Додає смуги прокручування всередині області відображення елемента, які відображаються навіть у випадку, коли вміст за розмірами міститься всередині блоку. Розмір контейнера не змінюється. |
| auto | Додає смуги прокручування лише у разі потреби. |
| hidden | Приховує вміст, що виходить за межі блоку. Може приховати частину вмісту. Використовується для блоків-контейнерів, що містять елементи, що плавають. Також запобігає відображенню фону або кордонів під плаваючими елементами (для яких встановлено властивість float: left / right; . При цьому розміри контейнера не змінюються. |
Рис. 1. Обрізання вмісту блоку за допомогою властивості overflow Синтаксис: div ( width: 200px; height: 150px; overflow: hidden; ) 2. Властивість overflow-x
Властивість задає, як обрізатиметься правий край контенту всередині блоку у разі його переповнення.
Синтаксис:
Div ( overflow-x: hidden; )
3. Властивість overflow-y
Властивість задає, як обрізатиметься нижній край контенту всередині блоку у разі його переповнення.
Синтаксис:
Div ( overflow-y: hidden; )
4. Властивість clip
Властивість визначає, яка частина елемента буде видно. Частина елемента, яка залишиться видимою після обрізки, називається областю відсікання. Відсікання застосовується до елемента, який спочатку повністю видимий. Властивість застосовується до елементів, котрим встановлено властивість position зі значеннями absolute чи fixed .
У цій статті ми розповімо вам про 3 швидких і простих методах CSS, які ви можете використовувати, щоб показати тільки частину картинки на вашій сторінці.
Усі використані тут методи, фактично потребують лише пари рядків CSSкоду. Однак, це не обрізання в прямому значенні цього слова ( CSSпоки не може зробити цього), ми просто приховуємо та показуємо тільки ту частину картинки, яку ми хочемо побачити.
Ці методики можуть бути дуже корисні, якщо ви хочете привести картинку до певного розміру, тобто хочете створити, наприклад, її превьюшку (зменшена копія зображення) у секції новин або щось подібне.
Техніка 1 - використання негативних полів ( Negative Margins)
Якщо вам не хочеться використовувати негативні поля, ми пропонуємо використовувати техніку №2 . Вона включає батька (абзац), у якого певні ширина і висота. Цей абзац має властивість позиціонування (position)поставлено як relative. Ширина і висота задають розміри поля, що відображається. А картинці, розміщеній усередині абзацу, властивість позиціонування (position)поставлено як absolute. Потім ми можемо за допомогою властивостей верх(top)і ліво(left)розташовувати картинку, як захочемо, в процесі визначаючи: яку частину зображення показувати, а яку ні.
HTMLідентичний коду з попередньої техніки:
< p class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "" / > < / a > < / p > |
Crop ( float: left; margin: . 5em 10px. 5em 0; overflow: hidden; /* this is important */ position: relative; /* this is important too */ border : 1px solid #ccc; width: 200px; height: 120px; Crop img ( position: absolute; top: - 40px; left: - 50px; |
Техніка 3 - використання властивості нарізки ( Clip Property)
Ця техніка має бути найлегшою, оскільки властивість нарізки (clip property)визначає частину елемента, що треба показати. Це звучить як досконале рішення, але є одна загвоздка: різаний (clipped) елементмає позиціонуватися абсолютно. Щоб була можливість використовувати елемент, нам доведеться додати додатковий елемент, обчислити розмір видимої області зображення, додати цей розмір батькові, пустити в хід батька... Купа роботи, чи не так?
О, ще одна проблемка: розмір підрізаного елемента не зменшується до величини обрізка, а залишається початкового розміру (картинка за межами обрізка просто ховається). Ми повинні використовувати абсолютне позиціонування, щоб рухати видиму область у верхній лівий кут батька.
Однак не можна залишити не згаданою властивість нарізки. І так знову код...
< div class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "css template" / > < / a > < / div > |
Ми завжди хочемо, щоб на сайті все було акуратно, але наприклад у вас є блоки з текстом який необхідно вписати в певні межі, це може бути анонс до статті або опис товару. При цьому текст має довільну довжину. Звичайно можна постійно підганяти текст під розміри поля що б не чого не їхало, а можна зробити так, щоб зайвий текст ховався.
Для цього є просте рішення на CSS. Використання властивості text-overflow: ellipsis що дозволяє обрізати рядок з довгим тестом. Для того щоб дане рішенняспрацювало необхідно вказати ширину батьківського блоку, і мати властивість overflow рівне hidden або clip .
Рішення для однорядкового тексту:
Box-text (text-overflow: ellipsis; //образка довгих блоків з текстом overflow: hidden; //ховати текст width, що виходить за межі: 100%; //ширина блоку з текстом white-space: nowrap; //заборона на перенесення тексту)
Все їхнє обладнання та інструменти були живими, у тій чи іншій формі.
Рішення для багаторядкового тексту:
Але для обрізки багаторядкового тексту на CSS доведеться вдатися до допомоги псевдо-елементів :before і :after .
Box-text ( overflow: hidden; height: 200px; line-height: 25px; ) .box-text:before ( content: ""; float: left; width: 5px; height: 200px; ) .box-text > * :first-child ( float: right; width: 100%; margin-left: -5px; ) .box-text:after ( content: "\02026"; box-sizing: content-box; float: right; position: relative; top: -25px; left: 100%; width: 3em; margin-left: -3em; padding-right: 5px; text-align: right; background-size: 100% 100%; to right, rgba(255, 255, 255, 0), white 50%, white);
Ліва сторона лісу була темна, в тіні; права, мокра, глянсова, блищала на сонці, трохи колихаючись від вітру. Все було в кольорі; солов'ї тріщали і перекочувалися то близько, то далеко.
