猿问

CSS- 在(任何)html 文本中的某些单词上方注入和对齐图像而不破坏文本流

我的目标是在基本上任何页面中动态(使用内容脚本)在文本上方注入图像,并保持文本正常对齐。我注入图像以使其具有特定属性的跨度,并且我的脚本(chrome 扩展的内容脚本)将跨度与另一个跨度(我 css 中的父项)包装在一起,该跨度具有 img(包装在自己的跨度)也是如此。


问题(CSS 问题)是当我注入图像时,文本的文本内衬被破坏了。


您可以在https://jsfiddle.net/wyfumrx6/2/ 中更清楚地看到这一切


“a Good”这个词没有与文本的其余部分放在一起。


这是我现在所做的,使用 inline-flex 和 flex-direction:


HTML 示例:


<a href="https://www.wikihow.com/Make-a-Good-Cup-of-Tea" style="/* line-height: 57px; *//* height: auto; */font-size: 150%;font-family: Gotham, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;/* height: 55px; *//* display: inline-flex; */">

  <span id="div0" class="aui_top_in_page_parent" tabindex="0" style="">

        <span id="span0" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/1/12313.png"

                class="aui_header_images"></span>

  <span aui-symbol="14907" aria-describedby="span0" accesskey="Shift + E">How

        </span>

  </span>

  <span id="div5" class="aui_top_in_page_parent" tabindex="0">

        <span id="span5" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/7/7194.png"

                class="aui_header_images"></span>

  <span aui-symbol="17982" aria-describedby="span5" accesskey="Shift + E">to</span></span> <span id="div6" class="aui_top_in_page_parent" tabindex="0"><span id="span6" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/3/32751.png"

                class="aui_header_images"></span><span aui-symbol="15410" aria-describedby="span6" accesskey="Shift + E">Make</span></span>

  a Good <span id="div7" class="aui_top_in_page_parent" tabindex="0"><span id="span7" class="aui_top_in_page"><img

                src="http://www.arasaac.org/repositorio/thumbs/10/50/2/2429.png" class="aui_header_images"></span><span aui-symbol="13621 12324 17511" aria-describedby="span7" accesskey="Shift + E">Cup of Tea</span></span>

</a>

在这里可以清楚地看到结果:https : //jsfiddle.net/wyfumrx6/


我希望线条和文字在图像位于“标记”字词上方时保持直线,并且该图像与上面的文本行有足够的边距,以便清楚 img 指的是哪个字。


凤凰求蛊
浏览 153回答 2
2回答
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答