Четверг, 17 Января 2013 11:25

Запрет переноса текста на новую строку

Written by 
Оцени эту запись
(6 Голоса)

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

 

 

Самый простой метод - это задать блоку фиксированные размеры и свойство overflow:

 

<div class="single_line">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

 

 

.single_line {
            width: 300px;
            height: 40px;
            line-height: 40px;
            background-color: #ee82ee;
            border: 1px solid blueviolet;
            color: blue;
            overflow: hidden;
            position: relative;
            word-break: break-all;
}
 
 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 
 
 
 
Второй способ аналогичный, но для него мы добавим плавное исчезание скрытого текста. Для этого используем псевдоэлемент :after, которому зададим градиентную заливку от цвета фона до него же, но с прозрачность. Для этих же целей можно использовать фоновую картинку, вместо градиента.
 
 
<div class="single_line2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
 
 
.single_line2 {
            width: 300px;
            height: 40px;
            overflow: hidden;
            position: relative;
            word-break: break-all;
}
 
.single_line2:after {
            content: '';
            display: block;
            width: 70px;
            height: 100%;
            background-image: -webkit-linear-gradient(right, #ee82ee, rgba(238, 130, 238, 0.1));
            background-image: -moz-linear-gradient(right, #ee82ee, rgba(238, 130, 238, 0.1));           
            position: absolute;
            right: 0;
            top: 0;
}
 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 
 
Получилось плавное исчезание текста. Это красивый прием, особенно когда текста обрывается на середине слова. Такое обрывание можно контролировать при помощи word-break со значениями normal(используется по умолчанию, строки переносятся только если явно задан перенос) и break-all(перенос добавляется автоматически). 
 
 
Третий способ будет отличаться одной строкой, но различия будут в идее. Ранее мы просто скрывали контент, которые не помещается в блоке. А сейчас мы сделаем обрезку текста при помощи CSS свойства text-overflow. Свойство text-overflow используется именно для скрытия текста, которые не помещается в блок. Свойство может принимать значения clip(текст просто обрезается) и ellipsis(текста обрезается и в конце появляется троеточие). Свойство text-overflow работает только для элементов со свойство overflow со значениями hidden, auto, scroll.
 
 
<div class="single_line3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
 
 
.single_line3 {
            width: 300px;
            height: 40px;
            overflow: hidden;
            text-overflow: clip;
}
 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 
 
 
 
 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов