请检查并运行此示例。
img {
width: 10px;
}
pre {
overflow: initial;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
max-width: 300px;
border: 1px solid;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<pre>Lorem ipsum, dolor sit amet consectetur ad<img src="https://randomm.cdn.bcebos.com/edit%20(1).svg"></img></pre>
<pre>Lorem ipsum, dolor sit amet consectetu<img src="https://randomm.cdn.bcebos.com/edit%20(1).svg"></img></pre>
<pre>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod voluptate nesciunt velit? Officiis doloribus fugit et harum nobis assumenda<img src="https://randomm.cdn.bcebos.com/edit%20(1).svg"></img></pre>
</body>
</html>我需要让图标跟随pre标记内的文本，但在某些情况下，文本长度将恰好是pre标记的最大宽度，这导致图标出现在下一行。这给用户带来了非常糟糕的体验。请告诉我如何设计这个编辑图标。非常感谢。
你不能这么做。这是一个刻板的图像。
解决方案：您可以从中使用图标https://fontawesome.com/icons
步骤：
- 添加一个字体很棒的CDN
- 使用图标的统计信息
- 您可以使用CSS轻松设计图标
示例：
<i class="fas fa-edit"></i>