Question

我尝试根据div的宽度和高度来渲染尽可能大的文本以适合div。宽度部分已经工作，但我的高度有问题。特别是“低”＆＃39;喜欢＆＃39; y＆＃39;，＆＃39; g＆＃39;，＆＃39; q＆＃39;在父元素之外呈现。

这个小提琴有望澄清我的意思：https://jsfiddle.net/xvp7jgy1/6/

HTML：

<div>
  <span>Country</span>
</div>

CSS：

div {
  height: 60px;
  width: 300px;
  margin: 20px;
  background-color: #ff0012;
  font-size: 60px; /* same as height */
}

我希望所有文本都显示在父元素的边界内。

更新：

div的尺寸并不总是与此示例相同，因此解决方案应灵活适应其他尺寸。

Answer 1

使用vh，您可以将元素的大小设置为视口的大小。也许它会起作用。

enter code here

div {
  height: 60px;
  width: 300px;
  margin: 20px;
  background-color: #ff0012;
}

span {
  font-size: 4vh;
}

Answer 2

默认情况下，div超出此处的块级元素将浏览器的宽度和height作为0px，直到它没有任何具有指定样式的子元素。但是根据你的上面的代码你有div的样式宽度和高度属性，所以我建议你删除它，因为你的divs总是会有文本，因此它正确对齐你的文本，因为父继承了孩子的身高或parent div内的内容。由于固定overflows some text，目前为height 60px。

div {
  margin: 20px;
  font-size: 60px;
  background-color: #ff0012;
  color:white;
}

<div>
  <span>Country</span>
</div>
<div>
  <span>y, q, g</span>
</div>

Answer 3

为什么不为你的CSS使用跨度？

span {
background-color: #ff0012;
font-size: 70px;}

无论如何，你的css都会按照文字的大小进行..

根据高度最大化字体大小

3 个答案: