Question

我是HTML和CSS的新手。似乎HTML中的文本确定了自己的宽度，无论我使用什么容器。当文本仍然有足够的空间放在一行上时，这会导致文本换行。如何将文本“锚定”到一行？

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

我尝试过使用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/ 在将结果窗口缩小之前，问题不明显。

image demonstrating the issue

Answer 1

[Serializable] class T { public int F1 { get; set; } public int F2 { get; set; } } T CloneT(T obj) { var ms = new MemoryStream(); var formatter = new BinaryFormatter(); formatter.Serialize(ms, o); ms.Position = 0; var clone = (T)formatter.Deserialize(ms); return clone; } var o = new T { F1 = 5, F2 = 12 }; CloneT(o);是造成这个问题的原因 - 你用它来改变字母的形状，但它也会改变容器的形状。

您可以通过使容器的宽度达到正常宽度的两倍来覆盖它，因此缩放转换将使其恢复到100％。您还需要设置transform-origin以使定位正确：

transform: scale()

.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%; 
}

HTML中不需要的文字换行

1 个答案: