html - 同一段落中的多种样式

Question

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

例如:我讨厌热狗!

“我”需要 16 像素，“讨厌”需要 40 像素，“热狗!”需要再次为 16px，但我希望所有文本都在同一个 <p> 中如果可能，或者如果不可能，至少看起来好像它们都在同一个<p> . (我使用的实际文本是一个相当长的段落，需要响应不同的浏览器宽度，因此文本能够像一个段落一样运行很重要。)

我使用 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

正如一些人已经说过的，您不使用 <div>对于这种情况，您需要 <span></span>这将允许在相同的内部使用不同的样式 <p> .您可以使用 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>

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