问题
我使用:: before来生成一个伪元素,以显示链接锚文本左侧的小图像.但是,当重新调整浏览器窗口的宽度时,该行可能会被包裹在小图像和链接锚文本的第一个单词之间,这是不希望的.
期望的结果
我想将小图像和链接锚文本的第一个单词保持在同一行.
我保持显示：内联在a-tag上,因为链接锚文本应该能够包裹行,而不是整个原子盒,但是它的第一个单词填满当前行,任何剩余的单词继续在下一行.
此外,链接后的文本应与链接锚文本的最后一个单词在同一行继续(前提是当前第一个单词有空格).
注1)如果我在a-tag上使用display：inline-block,整个链接锚文本将作为一个整体包装,这是我不想要的.
注2)我在伪元素上使用display：inline-block,因为我需要设置它的宽度和高度.
注3)我试过设置white-space：pre在伪元素上,但是没有解决问题.
谢谢！
我的HTML：
<p> Text text <a class="pre-icon" href="#">FirstWord word2 word3</a> text after link. </p>
我的CSS：
.pre-icon::before {
content: "";
display: inline-block;
width: 6px;
height: 10px;
background-color: transparent;
background-image: url(data:image/gif;base64,R0lGODlhBgAKAJEAADM2Zv///////wAAACH5BAUUAAIALAAAAAAGAAoAAAINBIRimdvHFETOUWglKwA7);
background-repeat: no-repeat;
margin-left: .13em;
margin-right: .25em;
white-space: nowrap;
}
解决方法
问题是在伪元素和内容之间发生换行,所以你不能通过仅将伪空间设置为伪元素来避免它.
相反,您可以将锚的内容包装在span中,将white-space：nowrap设置为整个锚,并恢复初始空白：span中的normal.
.pre-icon {
white-space: nowrap;
}
.pre-icon > span {
white-space: normal;
}
.pre-icon::before {
content: "";
display: inline-block;
width: 6px;
height: 10px;
background-color: transparent;
background-image: url(data:image/gif;base64,R0lGODlhBgAKAJEAADM2Zv///////wAAACH5BAUUAAIALAAAAAAGAAoAAAINBIRimdvHFETOUWglKwA7);
background-repeat: no-repeat;
margin-left: .13em;
margin-right: .25em;
}
.pre-icon {
white-space: nowrap;
}
.pre-icon > span {
white-space: normal;
}
Text text <a class="pre-icon" href="#"><span>FirstWord word2 word3</span></a> text after link.
