css 如何确保图标总是紧挨着前面的单词？[副本]

rvpgvaaj 于 2023-05-08 发布在其他

关注(0)|答案(4)|浏览(123)

此问题已在此处有答案：

How to stop text from taking up more than 1 line?（5个答案）
5天前关闭。
有没有人想出了一个好的解决方案，以确保一个图标总是紧挨着它前面的单词（即，它永远不会换行到下一行）？
运行下面的代码片段以查看问题...

div {
  width: 52ch;
}

img {
  width: 16px;
  height: 16px;
}

<div>
  The next sentence has a multi-word link where the (i) icon should always be next to the word "link".
  This is a <a href="#">sample link<img src="https://www.svgrepo.com/show/20745/info.svg"></a>.
</div>

我们的目标是始终保持（i）图标旁边的单词“link”，这样它就不会成为下一行的孤儿。如果句子需要换行，那么“link（i）”应该作为一个单元换行。
我无法控制的限制：
1.我不能这样做，因为我不能操作DOM（这必须是一个纯CSS解决方案）：<a href="#">sample <span class="no-wrap">link<img src="https://www.svgrepo.com/show/20745/info.svg"></span></a>
1.我不能使用像::before和::after这样的伪元素来呈现图标，因为图标可以在链接中的任何单词之后，而不一定是最后一个单词。

**************************他们关闭了这个重复，即使它不是一个重复，因为问题不是关于如何“阻止文本占用超过1行”。这是占用了更多的努力比它的价值，所以，而不是试图让这个重新打开，我将保持它关闭，只是接受有时图标不会旁边的前面的单词。虽然不美观，但也不是世界末日。

css

来源：https://stackoverflow.com/questions/76150880/how-to-ensure-an-icon-is-always-next-to-the-preceding-word

4条答案

按热度按时间

yks3o0rb1#

使用字体真棒图标，与css伪元素::after：

div {
  width: 52ch;
}

.infoLink::after {
  content: "\f05a";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 5px;
}

<head>
<meta charset="UTF-8">
<title>Your Title Here</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<div>
The next sentence has a multi-word link where the (i) icon should always be 
next to the word "link".
This is a <a class="infoLink" href="#">sample link</a>.
</div>

友情链接

font真棒信息图标：https://fontawesome.com/icons/circle-info?f=classic&s=solid
CSS：：after MDN docs：https://developer.mozilla.org/en-US/docs/Web/CSS/::after
将Font Awesome图标设置为伪元素Kevin Powell：https://youtu.be/lMBa7gLWyO4
pseudo elements作者：Kevin Powell https://youtu.be/djbtPnNmc0I

赞(0）回复(0）举报 2023-05-08

kxeu7u2r2#

您需要的是a锚标记上的display: inline-block属性。默认情况下，a的display属性为inline。
它们之间的主要区别是inline-block将确保元素内的所有内容都保持在同一行中（无论元素内有什么，都将作为一个单独的元素），而inline将通过在元素内创建新行来在空间耗尽时换行到下一行，这不是您想要的。

a {
  display: inline-block;
}

div {
  width: 52ch;
}

img {
  width: 16px;
  height: 16px;
}

<div>
  The next sentence has a multi-word link where the (i) icon should always be next to the word "link".
  This is a <a href="#">sample link<img src="https://www.svgrepo.com/show/20745/info.svg" /></a>.
</div>

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/display
另一种方法是使用强制浏览器永远不换行的字符：

div {
  width: 52ch;
}

img {
  width: 16px;
  height: 16px;
}

span {
  white-space: nowrap;
}

<div>
  The next sentence has a multi-word link where the (i) icon should always be next to the word "link".
  This is a <a href="#">sample link<span>&#8288;<img src="https://www.svgrepo.com/show/20745/info.svg" /></span></a>.
</div>

⁠字符在unicode中是\u2060，代表零宽度无中断空格（Word-joiner），它在屏幕上不呈现任何内容，但实际上是一个字符，迫使它在Flow Layout中不会在此字符处中断。当与white-space: nowrap一起使用时，浏览器不会在此字符处中断，从而确保图标与最后一个单词保持一致。
关于Unicode如何打断浏览器应遵循的文本的规范：https://www.unicode.org/reports/tr14/#WJ

赞(0）回复(0）举报 2023-05-08

rta7y2nd3#

相对于锚父对象定位图像：

div {
  width: 52ch;
}
a{
  position:relative;
}

img {
  width: 16px;
  height: 16px;
  position:absolute;
}

<div>
  The next sentence has a multi-word link where the (i) icon should always be next to the word "link".
  This is a <a href="#">sample link<img src="https://www.svgrepo.com/show/20745/info.svg"></a>.
</div>

赞(0）回复(0）举报 2023-05-08

ijxebb2r4#

你可以用font-aweseome和iframes在链接的任何地方添加Icon：

div {
  width: 52ch;
}

<head>
<meta charset="UTF-8">
<title>Your Title Here</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<div>
The next sentence has a multi-word link where the (i) icon should always be 
next to the word "link".
This is a 

<a class="infoLink" href="#">
  <i class="fa-solid fa-circle-info"></i>
icon at start link</a> ,

<a class="infoLink" href="#">
 icon at the 
 <i class="fa-solid fa-circle-info"></i>
middle link</a> ,
  
   <a class="infoLink" href="#">
icon at end link
<i class="fa-solid fa-circle-info"></i>
  </a> .

</div>

赞(0）回复(0）举报 2023-05-08

我来回答

css 如何确保图标总是紧挨着前面的单词？[副本]

4条答案

友情链接

相关问题

热门标签

最新问答