html - 响应式文本标题

Question

我想让文本标题响应。正如您在 here 中看到的那样，标题是“The Swift List”。我怎样才能让单词“THE”和“LIST”停留在单词“SWIFT”的边缘？我已经设法在正常屏幕尺寸下这样做了，但是当我改变屏幕尺寸时，它并没有像以前那样保持不变(在单词“SWIFT”的边缘)。

对于那些不想在新标签页中打开的人。我写的代码:

HTML

<p><span class="wordThe">THE</span>
<br><span class="textSwift">SWIFT</span>
<br><span class="wordList">LIST</span>

.carInfo {
  background: #05196b;
  height: 291px;
  color: #fff;
  padding: 15px 50px;
}
.wordThe {
  font-weight: bold;
  color: #ff1414;
  font-size: 2.5em;
  padding-left: 12%;
}
.textSwift {
  padding-left: 24%;
  font-style: italic;
  font-size: 4.5em;
  font-weight: bold;
  color: #fff;
  line-height: 0.5;
}
.wordList {
  font-weight: bold;
  color: #ff1414;
  font-size: 2.5em;
  padding-left: 67%;
}
.textAtRight {
  text-align: justify;
  direction: rtl;
  clear: both;
  float: right;
  letter-spacing: 1.5px;
}

<div class="row">
  <div class="col-md-6">
    <div class="carInfo">
        <p><span class="wordThe">THE</span>
        <br><span class="textSwift">SWIFT</span>
        <br><span class="wordList">LIST</span>
        <span class="textAtRight"><br>Lorem ipsum dolor sit amet
        <br>Consectetur adipisicing elit
        <br>dolor in reprehenderit in voluptate
        <br>velit esse cillum dolore eu
        <br>proident, sunt in culpa qui officia</span></p>
    </div>
  </div>
</div>

Answer 1

利用伪元素和数据属性

CSS

.carInfo {
    background: #05196b;
    height: 291px;
    color: #fff;
    padding: 15px 50px;
    text-align:center;
}

.textSwift {
  font-style: italic;
  font-size: 4.5em;
  font-weight: bold;
  color: #fff;
  line-height: 0.5;
  display:inline-block;
  position: relative;
  padding:3.5rem 0;
}

.textSwift::before{
  content:attr(data-before);
  position: absolute;
  font-weight: bold;
  color: #ff1414;
  font-size: 3.5rem;
  top:0;
  left:0;
}

.textSwift::after{
  content:attr(data-after);
  position: absolute;
  font-weight: bold;
  color: #ff1414;
  font-size: 3.5rem;
  bottom:0;
  right:0;
}


.textAtRight {
  text-align: justify;
  direction: rtl;
  clear: both;
  float: right;
  letter-spacing: 1.5px;
}

HTML

<div class="row">
    <div class="col-md-6">
      <div class="carInfo">
        <p>
            <div>
                <span class="textSwift" data-before="THE" data-after="LIST">SWIFT</span>
            </div>

        <span class="textAtRight">
            <br>Lorem ipsum dolor sit amet
            <br>Consectetur adipisicing elit
            <br>dolor in reprehenderit in voluptate
            <br>velit esse cillum dolore eu
            <br>proident, sunt in culpa qui officia
        </span>

        </p>
      </div>
    </div>
    </div>

希望这对您有帮助..

Link for reference