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

利用pseudo elements和data-attributes

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

Answer 2

更改以下部分的CSS：

.wordThe {
  font-weight: bold;
  color: #ff1414;
  font-size: 4.5vw;
  padding-left: 6vw;
}
.textSwift {
  padding-left: 22vw;
  font-style: italic;
  font-size:6.5vw;
  font-weight: bold;
  color: #fff;
  line-height: 0.5;
}
.wordList {
  font-weight: bold;
  color: #ff1414;
  font-size: 4.5vw;
  padding-left:52vw;
}

vw计算为视口宽度的1/100，在您调整屏幕大小时会动态更改。同样，如果您希望它们也能响应，您也可以将其应用于其他文本。

Answer 3

利用媒体查询来帮助您更改不同宽度的代码。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

我认为你应该做的是利用查询和flexbox来实现这一目标。

我希望我已经回答了你的问题。我在视觉上很难理解你想要什么，所以如果我想出一个代码示例，我会分享它。

响应文本标题

3 个答案: