最近写代码时遇到一个样式问题，于是现编了一个css面试题，有兴趣的可以把解决方案放在评论区，不喜勿喷 Y(^_^)Y。
在不使用 word-break: break-all; 的情况下(word-break 其他属性可以使用），实现下图效果: 文字换行时，文字和svg左对齐。
可在下方代码修改：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#container {
}
.icon {
}
.text {
font-size: 1em;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="container">
<span class="icon">
<svg
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
>
<path
d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128c-211.744443 0-384 172.255557-384 384s172.255557 384 384 384 384-172.255557 384-384S723.744443 128 512 128z"
fill="#575B66"
p-id="3244"
/>
</svg>
</span>
<span class="text">
wasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasdwasd
</span>
</div>
</body>
</html>
