Переполнение текста исчезает, когда он длиннее контейнера, и прокручивается при наведении - PullRequest
Новая
       23

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

2 голосов
/ 30 сентября 2011

У меня был вопрос jquery / css.

Мне было интересно, знаете ли вы, как сделать ссылку в элементе списка (который длиннее, чем его контейнер), чтобы не переносить на новую строку, а вместо этого оставаться на одной строке и исчезать / обрезать переполнениеОстальная часть ссылки.Кроме того, ссылка будет «помечена» (справа налево), чтобы показать оставшуюся часть текста, когда пользователь перевернул ее (при наведении курсора).

Кроме того, текст не обязательно должен быть «"исчезла", но может быть просто отрезана в нескольких пикселях от края контейнера. 

.list_wrapper li {
display: block;
height: 23px;
margin: 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.list_wrapper li:last-child {
margin-bottom: 5px;
}

.list_wrapper li:nth-child(odd) {
background:#FAFAFA;
border-top: 1px solid #FAFAFA;
border-bottom: 1px solid #FAFAFA;
}

.list_wrapper li:nth-child(even) {
background:#FFFFFF;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
}

.list_wrapper li:hover {
cursor: default;
background: #F3F3F3;
border-top: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
}

.list_wrapper a {
color: #145F92;
font: 400 11px/23px "Lucida Grande", tahoma, verdana, arial, sans-serif;
margin-left: 13px;
-webkit-transition: color .3s ease;
-moz-transition: color .3s ease;
-ms-transition: color .3s ease;
transition: color .3s ease;
 }

.list_wrapper a:hover { text-decoration: underline; }

.article_list {
float:left;
display: block;
width:100%;
}

Есть идеи, как мне этого добиться?

Требуется внешний вид:

http://i1132.photobucket.com/albums/m563/carrako/link_face.jpg

1 Ответ

3 голосов
/ 30 сентября 2011

Чтобы «обрезать» текст, используйте следующий CSS: 

.list_wrapper li {
    overflow: hidden;
}

.list_wrapper li a {
    white-space: nowrap;
    position: relative; // Needed for the animation!
}

Затем для анимации "тикер" используйте анимационную платформу, например, jQuery, чтобы «переместить» элемент <a> (анимировать свойство CSS left) при его наведении; но только если offsetWidth элемента превышает ширину родительского узла (в противном случае нам не нужно прокручивать). На mouseout мы остановим анимацию и переместим элемент обратно.

Пример использования jQuery : 

$('.list_wrapper li a').mouseover( function() {
    if( this.offsetWidth > this.parentNode.offsetWidth ) {
        $(this).animate({'left': '-'+(this.offsetWidth)+'px'}, 5000, function(){this.style.left='0px';});
    }
} ).mouseout( function() {
    $(this).stop();
    this.style.left = '0px';
} );

Чтобы этот JavaScript-фрагмент работал, вам нужно встроить jQuery-фреймворк на ваш сайт. Фрагмент должен быть выполнен по завершении загрузки страницы: либо вы помещаете его в самый конец HTML-кода (непосредственно перед </body>), либо запускаете его window.onload.

Рабочий пример см. Здесь:
http://jsfiddle.net/z7V7d/2/

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

...