CSS Нестандартный text-align, как выровнять?

Question

CSS Нестандартный text-align, как выровнять?

Рейтинг: 0Ответов: 1Опубликовано: 28.03.2023

При верстке с шаблона столкнулся с таким не стандартным выравниванием текста. Анализатор psd шаблона сломался, и показывает невалидное значение text-align: justifyLeft; Подскажите, пожалуйста, как такое сверстать, что б оно выравнивалось и по правому краю, и что б отступы были.

body {
  margin: 0;
}

.section_2__box {
  position: relative;
  float: right;
  margin-left: 170px;
  margin-right: 94px;
  max-width: 620px;
  z-index: 2;
}

.section_2__box:before {
  content: "";
  position: absolute;
  top: -38px;
  left: -80px;
  padding: 38px 0 82px 80px;
  width: 400%;
  height: 100%;
  background-color: rgba(215, 191, 191, 0.74);
  z-index: -1;
}

.section_2__box p {
  margin: 0;
  position: relative;
  line-height: 28px;
  font-size: 18px;
  text-align: end;
  letter-spacing: 0.36px;
  z-index: 3;
}

<div class="section_2__box">
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat,
    sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, architecto beatae vitae dicta sunt explicabo. Neque porro quisquam est, qui dolorem ipsum
    quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

</div>

css html вёрстка

Источник: Stack Overflow на русском

Answer 1

▲ 3Принят

как такое сверстать, что б оно выравнивалось и по правому краю, и что б отступы были

Предложу такой вариант...

В стилях я пометил добавленные свойства комментарием.

body {
  margin: 0;
}

.section_2__box {
  position: relative;
  float: right;
  margin-left: 170px;
  margin-right: 94px;
  max-width: 620px;
  z-index: 2;
}

.section_2__box:before {
  content: "";
  position: absolute;
  top: -38px;
  left: -80px;
  padding: 38px 0 82px 80px;
  width: 400%;
  height: 100%;
  background-color: rgba(215, 191, 191, 0.74);
  z-index: -1;
}

.section_2__box p {
  margin: 0;
  position: relative;
  line-height: 28px;
  font-size: 18px;
  letter-spacing: 0.36px;
  z-index: 3;
  /* добавил */
  text-align: justify;
  text-align-last: left;
  text-indent: 20px;
}

<div class="section_2__box">
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat,
    sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, architecto beatae vitae dicta sunt explicabo. Neque porro quisquam est, qui dolorem ipsum
    quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

</div>

CSS Нестандартный text-align, как выровнять?

Ответы