Обрезать строку в <a>с многоточием, но в конце оставить img - без JS - PullRequest
Новая
       40

Обрезать строку в <a>с многоточием, но в конце оставить img - без JS

0 голосов
/ 20 ноября 2018

Я хочу обрезать текст ссылки в заголовке с помощью elippsis, но в конце оставлю img, который играет роль глификона.Все без JS.Мой код: 

<!DOCTYPE html>
<html>
<body>

<ul>
    <li>
        <a href="#">Very long text very long text very long text<img src="https://banner2.kisspng.com/20180203/tsq/kisspng-arrow-ico-icon-right-arrow-png-photo-5a758aa9a205b1.5795578115176526496637.jpg"></a>
    </li>
</ul>

<style>
img{
    width: 20px;
}

li{
    list-style-type: none;
}

a{
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

a:hover{
    text-decoration: underline;
    color: red;
}
</styles>

</body>
</html>

К сожалению, ссылка обрезана с помощью img.Поэтому я переместил img за пределы тега: 

<ul>
    <li>
        <a href="#">Very long text very long text very long text</a><span><img src="https://banner2.kisspng.com/20180203/tsq/kisspng-arrow-ico-icon-right-arrow-png-photo-5a758aa9a205b1.5795578115176526496637.jpg"></span>
    </li>
</ul>

Это работает не так, как ожидалось - когда я наводю курсор на img, ссылка не подчеркивается.

Я также пытаюсь переместить imgперед ссылкой и используйте «pull-right» для img и работайте как положено, но в мобильной версии дизайн отличается, поэтому img непреднамеренно перемещается вправо.

Заранее благодарен за помощь.

1 Ответ

0 голосов
/ 20 ноября 2018

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

img{
    width: 20px;
}

li{
    list-style-type: none;
}

a{  
  text-decoration: none;
}

a span{
  width: 150px;
  display:inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a:hover{
    text-decoration: underline;
    color: red;
}
<ul>
    <li>
        <a href="#"><span>Very long text very long text very long text</span><img src="https://banner2.kisspng.com/20180203/tsq/kisspng-arrow-ico-icon-right-arrow-png-photo-5a758aa9a205b1.5795578115176526496637.jpg"></a>
    </li>
</ul>

Вот рабочий jsfiddle .

...