HTML 中不需要的文字换行

Question

我是 HTML 和 CSS 的新手。似乎 HTML 中的文本决定了它自己的宽度，无论我制作容器是什么。这会导致文本在仍然有足够的 space 适合一行时换行。如何将 "anchoring" 文本变成一行？

我尝试手动将所有父元素的宽度设置为比文本宽，但文本继续独立计算自己的宽度。

我试过使用 white-space: nowrap，但是文本的宽度继续像以前一样计算（好像有文本换行），所以文本溢出偏离中心是因为文本开始的地方如果有文本换行的话它本来应该在的地方。

HTML:

<div class="title-wraper" style="

">
  <a><div class="title">A WITCH SCORNED</div></a>
</div>

<div class="title-wraper" style="
    white-space: nowrap;
">
  <a><div class="title">A WITCH SCORNED</div></a>
</div>

CSS:

.title {
    font-family:Baskerville, 'Times New Roman', Times, serif;
    font-size: 60px;
    transform: scale(.5,1);
    line-height: 45px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

这是我的问题的复制：https://jsfiddle.net/qb6fopdx/9/ 在您使结果 window 变窄之前，问题并不明显。

image demonstrating the issue

Answer 1

transform: scale() 是导致此问题的原因 -- 您使用它来更改字母的形状，但它也会更改容器的形状。

您可以通过将容器的宽度设置为正常宽度的两倍来覆盖它，这样缩放变换会将其恢复到 100%。您还需要设置 transform-origin 以使定位正确：

.title {
  font-family: Baskerville, 'Times New Roman', Times, serif;
  font-size: 90px; /* made it bigger so the difference is visible in a snippet */
  text-align: center;
}

.title-wrapper {
  transform: scale(0.5, 1); 
  white-space: nowrap;
  border: 1px solid; /* so you can see what's going on */
}

.title-wrapper.corrected {
  transform-origin: 0 0;
  width: 200%; 
}

<div class="title-wrapper">
  <a>
    <div class="title">A WITCH SCORNED</div>
  </a>
</div>
<div class="title-wrapper corrected">
  <a>
    <div class="title">A WITCH SCORNED</div>
  </a>
</div>

HTML 中不需要的文字换行

Unwanted Text Wrapping in HTML

html

css

word-wrap