Отступ слева при переносе строки bootstrap3 / css

Question

Всем привет.

У меня есть блок с текстом, ему назначен padding. При адаптации происходит перенос текста на другую строку. Пытасю сделать отступ после переноса строки и выровнять текст по буквам, как на фото красная линия, Прикладываю скрин:

<div class="row">
   <div class="col-sm-6">
       <p><i class="fas fa fa-map-marker-alt fa-lg"></i><i style="padding: 0px 8px;">Mвывы. вввввв Lвыв</i><br>
           <i style="padding: 0px 13px;"></i>Пушкина 85<br><i style="padding: 0px 13px;"></i>ОП мира<br><i style="padding: 0px 13px;"></i>РФ<br> 
           <i class="fas fa-info fa-lg"></i><i style="padding: 0px 15px; line-height: 1.7rem; pointer-events: none;">dsdsdsds<br></i></p>
   </div>
   <div class="col-sm-6">
       <p><i class="fas fa-phone-volume fa-lg"></i><a style="padding: 0px 5px; cursor:pointer;" href="tel:+420776674190"></a>+7 84785488757<br>
           <i class="fas fa-solid fa-at fa-lg"></i><a class="test" style="padding: 0px 8px;" href="mailto:[email protected]">[email protected]</a></p>
   </div>
</div>

Answer 1

избавьтесь от bootstrap - он только вредит. избавьтесь от этих "<i></i>" - это про что вообще? зачем? просто добавьте к ссылкам псевдоэлементы с бэкграугдом в виде иконок, в css это делается очень просто

Answer 2

Сейчас есть более современные способы типа flex или grid, но всё же покажу интересный классический вариант:

p {
  padding-left: 2em;
  text-indent: -2em;
}

i {
  display: inline-block;
  width: 1.5em;
  margin: -.25em .5em -.25em 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: silver;
  vertical-align: middle;
}

<p><i></i>При адаптации происходит перенос текста на другую строку. При адаптации происходит перенос текста на другую строку. При адаптации происходит перенос текста на другую строку. При адаптации происходит перенос текста на другую строку. При адаптации происходит перенос текста на другую строку.</p>

БЛОГ НА HUSL

Отступ слева при переносе строки bootstrap3 / css

Ответы (2 шт):