Question

is there a way to make the second line of text, appear as if it had margin-left (or something) so that is directly underneath where the first one starts?

I know I could achieve a similar result using a <table>, but I'd really like not to, so is there another way?

.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>

Answer 1

Use display: flex css property as shown below

<!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>

Use your html like this Keep the svg out of the 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>

Answer 2

使用 Flexbox 进行此操作确实是一个很好的决定：

.thumbs {
  width: 30%;
  position: relative;
  /*top: 45px;*/
  transform: rotate(180deg);
}

.text-with-borders {
  display: flex; /* displays flex-items (children) inline */
  align-items: center; /* centers them vertically */
  margin: 0 auto;
  max-width: 600px;
  /*text-align: left;*/
}

<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">
  <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>

How to make the second line of the wrapped text appear appear right under the first one, like in the picture:

2 个答案: