有没有办法让第二行文本看起来有 margin-left(或其他东西)，以便它直接位于第一行开始的下方？
我知道我可以使用 <table> 获得类似的结果，但我真的不想这样做，那么还有其他方法吗？
.thumbs {width:30%;
position:relative;
top:45px;
transform:rotate(180deg);}<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="thumbs" viewbox="0 0 400 150"><path d="M141.05 67.45c0 3.601 1.649 7.05 4.2 9.3-1.801 2.4-2.551 5.4-2.25 8.4.6 6.3 6.3 11.4 12.899 11.4h19.5l-1.2 9.3c-.3 2.85-.3 5.25.301 7.649 2.25 9.75 10.949 16.65 21 16.65 2.25 0 4.5-.9 6.15-2.55 1.65-1.65 2.55-3.75 2.55-6v-12.3c0-5.4 1.5-10.5 4.351-15.15l5.25-8.4c.75-1.199 1.8-2.1 3-2.699 1.05 3.3 4.05 5.699 7.649 5.699h17.25c4.5 0 8.101-3.6 8.101-8.1v-50.55c0-4.5-3.601-8.101-8.101-8.101h-17.55c-4.5 0-8.1 3.601-8.1 8.101v1.2c-3.9-3.45-9-5.551-14.55-5.551h-38.101c-3.45 0-6.899 1.5-9.3 3.9s-3.6 5.55-3.45 8.85c0 1.2.15 2.25.601 3.45a12.478 12.478 0 0 0-6.75 11.101c0 1.649.3 3.3.899 4.8-2.7 2.551-4.349 6.002-4.349 9.601zm82.649-37.2c0-.3.301-.6.601-.6h17.399c.301 0 .601.3.601.6v50.551c0 .3-.3.6-.601.6h-17.55c-.3 0-.6-.3-.6-.6V30.25h.15zm-72.3 32.7c1.2-.6 2.101-1.649 2.4-3 .3-1.35 0-2.7-.9-3.75-.75-.899-1.05-1.95-1.05-3 0-2.399 1.8-4.5 4.2-4.95 1.5-.3 2.85-1.199 3.45-2.699.6-1.5.449-3-.45-4.351-.601-.75-.9-1.8-.9-2.85 0-1.2.45-2.55 1.351-3.45 1.05-1.05 2.55-1.65 4.05-1.65h38.1c7.95 0 14.55 6.45 14.55 14.551v27.6c-3.75.9-6.899 3.15-9 6.45l-5.25 8.399c-3.6 5.7-5.55 12.301-5.55 19.051v12.3c0 .3-.149.6-.3.75-.15.149-.45.3-.75.3-6.6 0-12.15-4.5-13.65-10.8-.3-1.351-.449-3-.149-4.95l1.35-10.5c.3-1.8-.3-3.6-1.5-5.1-1.2-1.351-3-2.25-4.8-2.25h-20.7c-2.55 0-5.1-2.101-5.399-4.5-.15-1.801.75-3.601 2.25-4.65 1.35-.9 2.1-2.55 1.949-4.2-.149-1.649-1.199-3-2.85-3.6-1.95-.75-3.15-2.55-3.15-4.65-.151-1.951.899-3.6 2.698-4.501z"/></symbol></svg>
<div class="text-with-borders" style="margin: 0 auto;display:block;;text-align: left;
max-width:600px;">
<p><svg class="thumbs" role="img"><use xlink:href="#thumbs" /></svg>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore
</div>最佳答案
使用display:flex css 属性如下所示
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div style="display:flex;">
<i class="fa fa-thumbs-o-up"></i>
<span style="margin-left: 10px;">This is some text. This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.</span>
</div>
</body>
</html> 像这样使用您的 html 让 svg 远离 div
<div class="test" style="display: flex;">
<svg>
<use ...>
</svg>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et
</p>
</div>
关于css - 如何使换行文本的第二行出现在第一行的正下方，如图 :，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50685722/