居中缩放溢出文本答案

【问题标题】：Centering scaled overflowing text居中缩放溢出文本
【发布时间】：2016-01-14 16:58:52
【问题描述】：

在我的 html/css 应用程序中，我有一个按钮的概念，它本质上是类 .button 具有一堆适当的属性。这是一个简化的示例：

.button {
  width: 120px;
  height: 30px;
  line-height: 30px;
  background: yellow;
  text-align: center;
}

<div class="button">
  <div class="button-text">
    Button text
  </div>
</div>

在少数地方，需要显示的文字比较长，但仍然需要完全适应。由于不支持font-stretch 属性，所以我使用transform: scale，它可以满足我的需要 - 有点......除了上述之外，我还有：

.button {
  width: 120px;
  height: 30px;
  line-height: 30px;
  background: yellow;
  text-align: center;
}
.button-text {
  line-height: 30px;
  transform: scale(0.7, 1);
  white-space: nowrap;
}

<div class="button">
  <div class="button-text">
    Very long button text
  </div>
</div>

文本现在适合，但不是居中，因为 div 中居中内容的位置是在应用转换之前计算的 - 请参阅此 jsfiddle 中的示例：https://jsfiddle.net/1xz1g634/1/

我可以通过对.button-text 应用负左边距来“使”它居中，但这是一种技巧，并且不同浏览器中的边距必须不同。

我怎样才能使该文本普遍居中？理想情况下，不求助于 javascript，但是，如果一切都失败了，我可以使用 javascript/jquery。

【问题讨论】：

您真的需要转换后的文本吗？省略一个选项吗？
@Joum 不，省略不是一种选择。要求是完整显示文本。
我只是想知道，如果你的文字由于某种你无法控制的原因变得更大，它将无法阅读
我有点困惑。如果您可以明确设置按钮的样式以进行转换，为什么不直接将字体大小更改为更小呢？
@JesseKernaghan 有问题的按钮出现在一行按钮（工具栏）中。较小的字体将意味着较小的垂直尺寸，这看起来不太好。我想保持与其他按钮相同的垂直字体大小 - 只水平“挤压”文本。

标签： html css css-transforms

【解决方案1】：

如果您将容器设置为display:flex + justify-content:center，则它会正确居中。

.button {
  width: 120px;
  height: 30px;
  background: yellow;
  display: flex;
  justify-content: center;
}
.button-text {
  line-height: 30px;
  transform: scale(0.7, 1);
  white-space: nowrap;
}

<div class="button">
  <div class="button-text">
    Very long button text
  </div>
</div>

【讨论】：

【解决方案2】：

很遗憾，长文本不居中的原因是因为它正常溢出，所以text-align:center无效。

缩放文本（虽然我觉得较小的字体大小 {Codepen Demo} 可能更合适）不会覆盖文本居中，因为变换只是视觉效果。

我认为最佳解决方案（除了 font-sizing）是绝对定位内部文本元素并使用常用方法居中。

.button {
  width: 120px;
  height: 30px;
  line-height: 30px;
  background: yellow;
  text-align: center;
  position: relative;
  margin: 1em auto;
}
.button-text {
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 30px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  ;
}
.button-text.scaled {
  transform: translate(-50%, -50%) scale(0.7, 1);
}

<div class="button">
  <div class="button-text">
    Very Long Button Text
  </div>
</div>

<div class="button">
  <div class="button-text scaled">
    Very Long Button Text
  </div>
</div>

【讨论】：

这很优雅，也很简单，但我认为它可能会因提到的提议文本 OP 而失败......

【解决方案3】：

您也可以使用 display: table 来执行此操作...适用于 IE9。

实际上可以使用filter: progid:DXImageTransform.Microsoft.Matrix 进行缩放以降低到 IE8。

.button {
  width: 120px;
  height: 30px;
  background: yellow;
  display: table;
  text-align: center;
}
.button-text {
  display: table-cell;
  line-height: 30px;
  transform: scale(0.7, 1);
  white-space: nowrap;
}

<div class="button">
  <div class="button-text">
    Very long button text
  </div>
</div>

【讨论】：

【解决方案4】：

已为您修复。文本将自动居中，按钮将自动缩放。

CSS：

.button {
  display: inline-block;
  padding: 10px 20px;
  background: yellow;
  text-align: center;
}

.button-text {
  line-height: 30px;
  transform: scale(0.7, 1);
  white-space: nowrap;
}

HTML：

<div class="button">
  <div class="button-text">
    Very long button text
  </div>
</div>

https://jsfiddle.net/m7Lgmpn6/

【讨论】：

我要指出.button 类已从其默认显示属性中设置为inline-block，而不是发现差异。
这不是解决方案。我的按钮必须是固定大小的，我不能依赖明确的像素值，因为它们对于不同的设备会有所不同。简单地设置 display: inline-block 什么都不做 - 自己看看：jsfiddle.net/g6nL456a/1
Aleks G，我所做的不仅仅是更改显示类型。仔细看。如果您打算仅通过 CSS 使文本居中，则不可能同时在不同文本长度的按钮中居中文本并且不改变按钮宽度。您必须加载 DOM，然后运行一个脚本来获取文本的宽度，从按钮宽度中减去它，将该数量除以 2，然后将文本相对定位到左边的计算量。
@Korgrue 显然，这是可能的 - 看看接受的答案。