具有 fa 图标的锚标记内的非破坏性内容

Question

如何使锚标签内容不间断，里面有I标签

anchor tag breaks likes in this image

但我想要它不破。就像这张图片 Non-breaking anchor tag

我的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>

在这种情况下不起作用。

谁能帮我解决这个问题？

提前致谢。

Answer 1

在您的按钮上使用 white-space: nowrap;（参见 white-space on 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>

具有 fa 图标的锚标记内的非破坏性内容

Non-breaking content inside anchor tag which has fa icon

html

css

font-awesome