Неразрывный контент внутри тега привязки, который имеет иконку fa - PullRequest
Новая
       15

Неразрывный контент внутри тега привязки, который имеет иконку fa

0 голосов
/ 29 апреля 2020

Как сделать так, чтобы содержимое тега привязки было неразрывным, в котором есть тег I *

тег привязки разрывает лайки на этом изображении

Но я хочу это без поломок. Как на этом изображении неразрывный тег привязки

мой HTML код: 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>

<a class="show-more-btn" href="javascript:void(0);">Read&nbsp;More&nbsp;<i style="font-size:15px;" class="fa fa-chevron-down" aria-hidden="true"></i></a>

</body>
</html>

в этом случае не работает.

Кто-нибудь может мне помочь с этой проблемой?

Спасибо в авансовый.

1 Ответ

0 голосов
/ 29 апреля 2020

Используйте white-space: nowrap; (см. пробел на MDN ) на своей кнопке: 

.show-more-btn i {
  font-size: 15px;
}

.box {
  border: 1px solid #ddd;
  max-width: 85px;
}

.show-more-btn {
  white-space: nowrap;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="box">
<a class="show-more-btn" href="javascript:void(0);">Read&nbsp;More&nbsp;<i class="fa fa-chevron-down" aria-hidden="true"></i></a>
</div>
...