如何让设置不同样式的单词保持行内显示？

你的核心问题是用了独立的<p>标签包裹每个文本段，再加上给目标元素设置了display: block，导致每个文本块独占一行。以下是两种可行的解决方案：

方案一：用行内元素<span>重构结构（推荐） #

<span>是天然的行内元素，不会破坏文本的连续行布局，适合用来单独标记需要特殊样式的单词：

修改后的HTML：

<p class="Intro">This page has <span class="SixtyFive">all</span> you want.</p>

对应的CSS：

.SixtyFive {
  font-size: 20vw;
  /* 可选：添加垂直对齐，让大字号和普通文本对齐更协调 */
  vertical-align: middle;
}

p.Intro {
  text-indent: 0;
  margin: 0;
}

方案二：保留<p>标签，修改显示属性 #

如果一定要保留原有的三个<p>结构，需要把所有相关<p>的显示属性改为行内/行内块，同时移除display: block的设置：

修改后的CSS：

p.Intro, p.SixtyFive {
  display: inline;
  margin: 0;
}

p.SixtyFive {
  font-size: 20vw;
  vertical-align: middle;
}

为什么之前的尝试没生效？ #

你原代码里给p.SixtyFive设置了display: block，这个属性会强制元素独占一行，即使你尝试设置inline-block，如果没覆盖这个display: block，或者HTML里的<p>标签默认是块级元素，加上代码换行产生的空白字符，都会导致元素无法在同一行显示。

内容的提问来源于stack exchange，提问作者Michael Stiekema