我需要像在模型中一样设置此文本的样式

Question

未来的初级培训。

我需要像这张图片一样设置文本样式。 那是手机版。

它会在平板电脑和台式机上发生变化。

我正在考虑只使用一个列表，但我认为它不适用于平板电脑/桌面版本。

<div class="swiper-slide customer-review__slide">
        <img
          src="images/review-1-85.png"
          srcset="images/review-1-170.png 2x"
          alt="Satisfied customer"
          class="customer-review__picture"
        />
        <div class="customer-review__quote">
          <p class="customer-review__paragraph">
            Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In
            hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus.
          </p>
        </div>
        <div class="customer-review__dots">
          <svg width="8" height="8" class="customer-review__circle">
            <circle r="2" cx="4" cy="4" />
          </svg>
          <svg width="8" height="8" class="customer-review__circle">
            <circle r="2" cx="4" cy="4" />
          </svg>
          <svg width="8" height="8" class="customer-review__circle">
            <circle r="2" cx="4" cy="4" />
          </svg>
        </div>
        <h3 class="customer-review__name">Emily, Los Angeles</h3>
      </div>

先感谢您！

我尝试使用填充和边距但没有效果。

Answer 1

很难让下划线延伸到容器的边缘，因此您可以使用重复的背景来达到类似的效果。 您可以使用一些 css 自定义属性对其进行修改，以使背景和字体大小更加灵活。

 .customer-review__paragraph { position: relative; /* creata a new containing block so the::before pseudo element can be positioned in the right place */ line-height: 2rem; padding-inline: 1rem; text-align: center; background-image: linear-gradient( 0deg, #e0e0e0 0%, #e0e0e0 1px, #00000000 1px, #00000000 1rem ); /* Make a background look like underline */ background-size: 100% 2rem; /*repeat it at the line height */ }.customer-review__paragraph::before { content: "\201D"; /* unicode for a closing quote */ font-size: 8rem; font-family: "Times New Roman", Times, serif; color: lightgray; position: absolute; left: 0rem; top: 1rem; z-index: -1; /*position underneath the text */ }

 <p class="customer-review__paragraph">Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus.</p>

Answer 2

我复制了那里的脚本，但添加了一些更改，比如你可以在 p 标签内添加 span 并给 p 填充，这样内线有填充，就像上面的图像一样，在上面的脚本中没有填充，但在你的屏幕截图中有填充。 您不能直接在 p 内添加填充，所以我在 p 内添加 span 还向 p class 添加了背景色，因此它看起来与您的图像完全一样 . 如果你认为你需要更多填充，它在移动设备上看起来像这样，你可以将它添加到 p 中。

 .customer-review__paragraph { padding: 30px 50px; background: #fafafa; z-index:-2; }.customer-review__paragraph span { display: block; position: relative; /* creata a new containing block so the::before pseudo element can be positioned in the right place */ line-height: 2rem; padding-inline: 1rem; text-align: center; background-image: linear-gradient(0deg, #e0e0e0 0%, #e0e0e0 1px, #00000000 1px, #00000000 1rem); /* Make a background look like underline */ background-size: 100% 2rem; /*repeat it at the line height */ }.customer-review__paragraph span::before { content: "\201D"; /* unicode for a closing quote */ font-size: 8rem; font-family: "Times New Roman", Times, serif; color: lightgray; position: absolute; left: 0rem; top: 1.2rem; z-index: -1; /*position underneath the text */ }.customer-review__paragraph span { z-index:1; }

 <p class="customer-review__paragraph"><span> Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. </span></p>