同一段落内有多种样式

Question

我试图弄清楚是否有一种方法可以以多种方式设置段落样式，以便格式具有响应性并且不同样式的文本保持在同一行。我是初学者，已经搜索了其他答案但无法弄清楚，所以如果答案很明显，请原谅我。

例如：我讨厌热狗！

“我”需要为 16 像素，“讨厌”需要为 40 像素，而“热狗！”需要再次为 16px，但如果可能的话，我希望所有文本都在同一个

中，或者如果不可能，至少看起来好像它们都在同一个 <代码>

。 （我使用的实际文本是相当长的一段，需要响应不同的浏览器宽度，因此文本能够表现得像一个段落一样很重要。）

我偷工减料了一个极其混乱和使用 div 的解决方案只是半成功，但我确信应该有一个更优雅的答案：

.container1 {
  position: absolute;
  font-size: 16px;
}

.container2 {
  position: relative;
  float: left;
  padding-top: 22px;
}

.container3 {
  position: relative;
  float: right;
  font-size: 40px;
  padding-left: 4px;
}

.container4 {
  position: relative;
  float: right;
  padding-left: 4px;
  font-size: 16px;
  padding-top: 22px;
}

<div class="container1">
  <div class="container2">I</div>
  <div class="container3">HATE
    <div class="container4">hot dogs!</div>
  </div>
</div>

Answer 1

正如有些人已经说过的，在这种情况下，您不会使用

，而是需要 ，这将允许在同一

内使用不同的样式。您可以使用 CSS 定义特定的文本样式：

定义字体大小的 CSS 类

.textA {
  font-size: 16px;
}

.textB {
  font-size: 40px;
}

<p>
  <span class="textA">I</span>
  <span class="textB">HATE</span>
  <span class="textA">hot dogs!</span>
</p>

内联样式
这种方法可能看起来更短，但在设计整个段落时效果就不太好。

编辑（@tacoshy 注释）： 也不应在电子邮件模板之外使用。这将导致主要的特定权重问题，导致可读性低并且无法缓存，从而导致加载时间更长。

<p>
  <span style="font-size: 16px;">I</span>
  <span style="font-size: 40px;">HATE</span>
  <span style="font-size: 16px;">hot dogs!</span>
</p>

请记住，您还可以设置其他样式，如字体颜色、斜体、粗体、背景颜色等。

Answer 2

在这种情况下，您不会使用

。您将使用 元素。它旨在将不同的样式应用于同一段落。这是您在问题中给出的示例：

p {
  font-size: 16px;
}

.i {
  padding-top: 22px;
}

.hate {
  font-size: 40px;
  padding-left: 4px;
}

.hd {
  padding-left: 4px;
  font-size: 16px;
  padding-top: 22px;
}

<p>
  <span class='i'>I</span>
  <span class="hate">HATE</span>
  <span class="hd">hot dogs!</span>
</p>

Answer 3

没有人注意到的一件事是，您可以（并且应该，IMO）在可能的情况下使用本机语义 HTML 元素，在失败时回退到通用 HTML 元素。

不需要两个以上的元素；包含的段落，以及强调的“仇恨”一词。请注意，我已在根级别 (html) 定义了 16px 字体，并相对于此定义了 40px (2.5rem)。这样，如果用户改变了字体大小，仇恨仍然会相对较大。

html { font-size: 16px; }
em { font-size: 2.5rem; font-style: normal; }

<p>I <em>HATE</em> hot dogs!</p>

Answer 4

您应该使用内联元素，例如 。您可以向它们添加类，也可以仅使用 :nth-child 选择器。在这里使用 float 是完全错误的。也没有理由 position：absolut 或 relative

p :nth-child(1) {
  padding-top: 22px;
}

p :nth-child(2) {
  font-size: 40px;
}

p :nth-child(3) {
  font-size: 16px;
}

<p>
  <span>I</span>
  <span>HATE</span>
  <span>hot dogs!</span>
</p>

Answer 5

您可以使用span。所以...

HTML

<div class="container1">
   <p>I
      <span class="text-effect-1">HATE</span>
      <span class="text-effect-2">HOT DOGS</span>
   </p>
</div>

CSS

.container1 p{
  font-size: ---;
  font-weight: ---;
  color: ---;
}

.text-effect-1{
  font-size: ---;
  font-weight: ---;
  color: ----;
}

.text-effect-2{
  font-size: ---;
  font-weight: ---;
  color: ----;
}