Как при помощи CSS обрезать длинный текст. Как обрезать длинную строку по количеству символов css и js решение задачи Решение со строковым SVG и border-image

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

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

На деле всё сводится к использованию свойства overflow со значением hidden . Различия лишь кроются в разном отображении нашего текста.

Используем overflow

Чтобы свойство overflow показало себя с текстом во всей красе, надо отменить перенос текста с помощью white-space со значением nowrap . Если это не сделать, то нужного нам эффекта не будет, в тексте добавятся переносы и он будет отображаться весь целиком. В примере 1 показано, как обрезать длинный текст указанным набором стилевых свойств.

Пример 1. overflow для текста

HTML5 CSS3 IE Cr Op Sa Fx

Текст .size { white-space: nowrap; /* Отменяем перенос текста */ overflow: hidden; /* Обрезаем содержимое */ background: #fc0; /* Цвет фона */ padding: 5px; /* Поля */ }

Результат данного примера показан на рис. 1.

Рис. 1. Вид текста после применения свойства overflow

Как видно из рисунка, недостаток в целом один - не очевидно что текст имеет продолжение, так что надо дать об этом понять пользователю. Для этого обычно применяется градиент или многоточие.

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

Чтобы стало понятнее, что текст справа не заканчивается, поверх него можно наложить градиент от прозрачного цвета к цвету фона (рис. 2). При этом будет создаваться эффект постепенного растворения текста.

Рис. 2. Текст с градиентом

В примере 2 показано создание этого эффекта. Стиль самого элемента практически останется прежним, сам же градиент будем добавлять с помощью псевдоэлемента ::after и CSS3. Для этого вставляем пустой псевдоэлемент через свойство content и к нему применяем градиент с разными префиксами для основных браузеров (пример 2). Ширину градиента легко изменять через width , также можно регулировать степень прозрачности, заменив значение 0.2 на своё.

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

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Текст .size { white-space: nowrap; /* Отменяем перенос текста */ overflow: hidden; /* Обрезаем содержимое */ padding: 5px; /* Поля */ background: #fc0; /* Цвет фона */ position: relative; /* Относительное позиционирование */ } .size::after { content: ""; /* Выводим элемент */ position: absolute; /* Абсолютное позиционирование */ right: 0; top: 0; /* Положение элемента */ width: 40px; /* Ширина градиента*/ height: 100%; /* Высота родителя */ /* Градиент */ background: -moz-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); background: -webkit-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); background: -o-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); background: -ms-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); background: linear-gradient(to right, rgba(255,204,0, 0.2), #fc0 100%); }

Внутридискретное арпеджио трансформирует полиряд, это и есть одномоментная вертикаль в сверхмногоголосной полифонической ткани.

Данный метод не работает в браузере 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

Текст .size { white-space: nowrap; /* Отменяем перенос текста */ overflow: hidden; /* Обрезаем содержимое */ padding: 5px; /* Поля */ text-overflow: ellipsis; /* Многоточие */ } .size:hover { background: #f0f0f0; /* Цвет фона */ white-space: normal; /* Обычный перенос текста */ } Бессознательное вызывает контраст, это обозначено Ли Россом как фундаментальная ошибка атрибуции, которая прослеживается во многих экспериментах.

Результат данного примера показан на рис. 3.

Рис. 3. Текст с многоточием

Большим плюсом указанных методов служит тот момент, что градиент и многоточие не отображаются если текст короткий и целиком помещается в заданную область. Так что текст будет выводиться как обычно, когда он целиком виден на экране и обрезаться при уменьшении ширины элемента.

Всем привет, меня зовут Анна Блок и сегодня мы поговорим о том, как обрезать изображения, не используя графических программ.

Где это может пригодиться?

Прежде всего, на сайтах, где контент с изображениями, вероятнее всего, не будет подрезаться под какой-либо конкретный блок.

Яркий пример : блог на WordPress.

Предположим, вы хотите, чтобы обложка вашей статьи имела пропорции 1:1 (квадрат). Ваши действия:

  • Скачаете подходящую картинку из интернета;
  • Обрежете ее в фотошопе до нужных пропорции;
  • Опубликуете статью.

    • Зайдя на сайт, вы увидите тот результат, который ожидали.

    Но, предположим вы забыли обрезать картинку в фотошопе и выгрузили рандомное изображение в качестве обложки из интернета, что будет тогда?! Правильно, верстка сломается. А если вы совсем не использовали CSS, то картинка HD разрешения и вовсе может перекрыть весь обзор на текст. Поэтому важно уметь делать обрезку изображений при помощи CSS стилей.

    Давайте разберем разные ситуации того, как это можно реализовать не только при помощи CSS, но и SVG.

    Пример 1

    Попробуем обрезать изображение которое размещено при помощи background-image. Создадим небольшую HTML-разметку

    Переходим к стилизации CSS. Через background-image добавляем изображение, указываем рамки для нашего изображения, центрируем изображение при помощи background-position и задаем background-size:

    Jpg); background-position:center center; background-size:cover; width:300px; height:300px; }

    Это был первый и самый простой метод по обрезке изображения. Теперь давайте рассмотрим второй пример.

    Пример 2

    Предположим, у нас есть всё тот же контейнер box внутри которого находится тег img с изображением, которое мы сейчас будем стилизовать.

    Также разместим наше изображение по центру относительно того объекта, который мы создадим. И используем свойство, которое довольно редко используются: object-fit .

    Box { position: relative; overflow:hidden; width:300px; height:300px; } .box img { position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; height:300px; object-fit:cover; }

    На мой взгляд, это лучший метод. Он идеально подойдет для блогов, если вы используете изображения для постов совершенно разных пропорций.

    Ознакомиться подробнее с HTML и CSS можно тут:

    Пример 3

    Также создавать обрезку для изображений мы можем в момент, если мы вставляем их в SVG элементы. Для примера возьмем круг. SVG мы можем создать при помощи тегов. Создаем обрамляющий тег svg внутри которого будет находится тег circle и тег pattern . В теге pattern пишем тег image . В нем мы указываем атрибут xlink:href и добавляем изображение. Также добавим атрибуты ширины и высоты. Но на этом не все. Нам потребуется добавить значение fill . Чтобы наша работа считала законченной мы добавим вспомогательный атрибут preserveAspectRatio в тег image , который позволит заполнить наше изображение «от и до» по всему кругу.

    Я не могу назвать этот метод универсальным. Зато его можно использовать в исключительных случаях. Например, если мы затронули тему блога, то идеально такой метод мог бы вписаться для аватарки автора который пишет статью.

    Ознакомиться подробнее с HTML и CSS можно тут:

    Итоги:
    Мы разобрали 3 метода обрезки изображения на сайтах: при помощи background-image , используя тег img и связанный с паттерном svg со встраиванием растровых изображений при помощи тега image . Если вы знаете ещё какие-то методы по обрезке изображения при помощи SVG, то делитесь ими в комментариях. Не только мне, но и другим будет полезно узнать о них.

    Не забывай задавать свои вопросы по вёрстке или фронтенд-разработке у профессионалов на FrontendHelp в режиме онлайн.

    Мы всегда хотим что бы на сайте все было аккуратно, но например у вас есть блоки с текстом который необходимо вписать в определенные границы, это может быть анонс к статье или описание товара. При этом текст у нас произвольной длины. Конечно можно постоянно подгонять текст под размеры поля что бы не чего не ехало, а можно сделать так чтобы лишний текст скрывался.

    Для этого есть простое решение на 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%; background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

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

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

    Добавление многоточия в конце текста можно добиться несколькими путями, в нашем распоряжение css и js.

    Для начала разберемся в задаче. Есть разметка блока



    • Много интересного текста о стилях, верстке, программированию и еще много интересного о сайтах

    • А как же нам поставить многоточие, если мы не можем ограничить блок размером?

    • Как на счет js скрипта? Он же может такое, правда

    • Хм, точно может. Вот держи код, он посчитает юникод символы и обрежет если нужно


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

    Обрезка текста css

    Для этого создадим стиль для класса tit
    .tit {
    white-space: nowrap; /* Отменяем перенос текста */
    overflow: hidden; /* Обрезаем содержимое */
    padding: 5px; /* Поля */
    text-overflow: ellipsis; /* Многоточие */
    }

    Особенность этого решения заключается в том, что если текст поместится в размер блока, то многоточие не будет добавлено. Что не всегда является решением задачи.

    Чаще всего необходимо обрезать текст по его длине и только после этого добавить точки.
    Также встречаются задачи, когда необходимо в любом случае добавить точки (неважно какой длины текст, хоть 3 буквы). А если текст длиннее определенного размера, то его необходимо обрезать. В этом случае необходимо использовать скрипты.

    Обрезаем текст по количеству символов и добавляем многоточие независимо от длинны


    function title() {
    var elem, size, text;
    var elem = document.getElementsByClassName("tit");
    var text = elem.innerHTML;
    var size = 75;
    var n = 70;
    for(var i = 0; i < elem.length; i++) { /* необходимо вставить цикл, чтоб получить все блоки с классом tit */
    if(elem[i].innerHTML.length > size) {
    text = elem[i].innerHTML.substr(0,n);
    }
    else {
    text = elem[i].innerHTML;
    }
    elem[i].innerHTML = text + "...";
    }
    }
    title();

    Что мы делаем?

    Указываем скрипту какие именно элементы нужно обрабатывать.
    Для этого в строке var elem = document.getElementsByClassName("tit"); указываем класс элемента (он должен быть одинаковый).

    Затем необходимо задать размер текста до его обрезки. Это наши короткие строки к которым будет добавлено многоточие. За это отвечает переменная var size = 75;

    Теперь скрипт должен пройти по всем элементам с нужным классом и проставить многоточие.
    Скрипт проверяет длину каждой строки и обрезает текст если его длинна превышает 75 символов. Если длинна меньше, то просто добавляется многоточие (строка if(elem[i].innerHTML.length > size)).

    Работу скрипта вы можете посмотреть на demo странице. На этом все, теперь вы знаете как обрезать длинный текст различными методами.

    В этой статье мы расскажем вам о 3 быстрых и простых методах CSS , которые вы cможете использовать, чтобы показать только часть картинки на вашей страничке.

    Все использованные здесь методы, фактически нуждаются только в паре строчек 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 >