Question

我有{{1}}元素的高度和宽度。在div元素里面，我有一个字体图标。我想让它延伸到div元素的全高和宽度。

bind是显示我尝试过的内容的链接。

Answer 1

我能想到的唯一方法是将文本包含在它自己的元素中并使用CSS转换，但它需要非常特殊的大小调整，并且需要针对每个图标和情况进行实验。我不相信任何浏览器都支持字体拉伸。

<div class="fa element"><span>&#xf09d;</span></div>

.element span {
  line-height: 0.2;
  display: inline-block;
  transform: scale(1.86,1.15);
  transform-origin: 0 0;
}

更新了bin：http://jsbin.com/mecodanovo/1/edit?html,css,js,output

Answer 2

有点可怕的答案，但这是我能想到的唯一方法。您需要添加容器，然后使用缩放转换

.container {
  -ms-transform: scale(1.87, 1.16);
    -webkit-transform: scale(1.87, 1.16);
    transform: scale(1.87, 1.16);
    margin-left: 91px;
    margin-top: 2px;
}

下面的完整方法

http://jsbin.com/fiqixudamo/1/edit?html,css,js,output

如何拉伸文本占据整个高度和宽度

2 个答案: