如何在 header 元素中单独为字符着色，同时在视图大小缩小时保留该元素作为单个元素换行？

Question

下面是我创建的 header 块，标题堆叠在 'navbar' 之上。如果您查看代码，您会看到一个 <h1> 标签包裹着两个 (2) 标签及其内容——它的基本（或基本）结构类似于这个：

    <h1>
        <div>
            <!-- Nested <span> tags --> 
        </div>

        <div>
            <!-- Nested <span> tags --> 
        </div>
    </h1>

问题

问题在于，当视口缩小时（这显然发生在移动设备上），元素会以各种疯狂的方式包裹。它的包装方式似乎取决于 view-port 大小，但无论如何；它总是以最不受欢迎的方式包装。我怎样才能让它换行，以便当屏幕缩小到必须换行的程度时，整个第二个单词 OPINIONS 换行，而不仅仅是 pinions 或 bstract?

@import url('https://fonts.googleapis.com/css?family=Cardo|Cinzel&display=swap');
:root {
  --red-alpha: #7C000D;
  --red-beta: #9C0810;
  --charcoal: #060912;
}

body {
  background-color: #555;
}

#head-alpha {
  display: block;
  background-color: #808080;
  border: 2.5px ridge #500C12;
  width: 90vw;
  height: 18%;
  padding: 2.5px;
  display: block;
  margin: 0 auto;
  top: 0;
}

#head-beta {
  display: block;
  background-color: #808080;
  border: 1px solid #400;
  width: 400px;
  height: 18%;
  padding: 2.5px;
  display: block;
  margin: 0 auto;
  top: 0;
}

.xxl-a {
  color: var(--red-alpha);
  font-family: 'Cinzel', serif;
  font-size: 55px;
  margin-right: -3px
}

.xxl-b {
  color: var(--charcoal);
  font-family: 'Cinzel', serif;
  font-size: 55px;
  margin-left: -4px;
}

.nav {
  display: block;
  width: auto;
  border: 1.25px solid #88040C;
  height: 32px;
  background: #101218;
  margin: 0;
  padding: 6px 16px;
  top: 0;
  position: sticky;
  position: -webkit-sticky;
  color: var(--red-beta);
  font-weight: 500;
}

.lrg-fg {
  font-size: 20px;
}

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>SOLO</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="nav.css">

</head>

<body>
  <h1 id="head-alpha">
    <div>
      <span id="span_1" class="xxl-a">A</span>
      <span id="span_2" class="xxl-b">bstract</span>
      <span id="span_0" class="xxl-b">&nbsp</span>
      <span id="span_3" class="xxl-a">O</span>
      <span id="span_4" class="xxl-b">pinions</span>
    </div>

    <div class="nav">
      <span class="lrg-fg">HOME &nbsp; • &nbsp; </span>
      <span class="lrg-fg">BLOG &nbsp; • &nbsp; </span>
      <span class="lrg-fg">UPDATES</span>
    </div>
  </h1>

  <br>
  <br>
  <br>

  <hr>

  <br>
  <br>
  <br>

  <h1 id="head-beta">
    <div>
      <span id="span_1" class="xxl-a">A</span>
      <span id="span_2" class="xxl-b">bstract</span>
      <span id="span_0" class="xxl-b">&nbsp</span>
      <span id="span_3" class="xxl-a">O</span>
      <span id="span_4" class="xxl-b">pinions</span>
    </div>

    <div class="nav">
      <span class="lrg-fg">HOME &nbsp; • &nbsp; </span>
      <span class="lrg-fg">BLOG &nbsp; • &nbsp; </span>
      <span class="lrg-fg">UPDATES</span>
    </div>
  </h1>

</body>

</html>

Answer 1

您可以将所有 "Abstract" 和所有 "Opinions" 元素包装在一个容器中，然后将它们包装在另一个容器中。现在您可以应用 display: flex 并在屏幕宽度更改时轻松更改 flex-direction。

Answer 2

选择器 ::first-letter 确实存在，它应该可以帮助您更简单地完成此操作。然后你可以只使用一个跨度。用法是

#span-1::first-letter {
  color: var(—A);
}

PS，CSS 的最佳做法是不要在选择器中使用 ID。那些往往被单独留下，所以 JavaScript 可以使用它们，而不是类倾向于被使用。

Answer 3

对摘要和意见使用 div。还要在 head 部分声明一个视口。在 html 和 body 上使用高度 100% 使 #head 高度为 space。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>SOLO</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cardo|Cinzel&display=swap">
<link rel="stylesheet" href="style.css">
</head>
<body>

<div id="head">
  <div>
    <span id="span_1" class="xxl-a">A</span>
    <span id="span_2" class="xxl-b">bstract</span>
  </div>
  <div>
    <span id="span_3" class="xxl-a">O</span>
    <span id="span_4" class="xxl-b">pinions</span>
  </div>
  <div class="nav">
    <p>Hello World!</p>
  </div>
</div>

使用 flex-wrap 包裹 span 的

:root {
  --A: #800;
  --B: #090909;
}
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  height: 100%;
  margin: 0;
  font: 400 1rem/1.5 'Cinzel', serif;
  background-color: #555;
}
#head {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 18%;
  padding: 2px;
  background-color: #aaa;
  border: 1px solid #400;
}
.xxl-a {
  display: inline-block;
  padding: 0 3px;
  color: var(--A);
  font-family: 'Cinzel', serif;
  font-size: 55px;
}
.xxl-b {
  display: inline-block;
  padding: 0 3px;
  color: var(--B);
  font-family: 'Cinzel', serif;
  font-size: 55px;
}
div.nav {
  width: 100%;
  height: 50px;
  position: -webkit-sticky;
  position: sticky;
  top: 0; left: 0;
  border: 1px double #A00;
  background-color: #444;
}

如何在 header 元素中单独为字符着色，同时在视图大小缩小时保留该元素作为单个元素换行？

How to individually color characters in a header element while preserving that the element wraps as a single element when the view size shrinks?

html

css

responsive-design

问题