如何使文本占据其容器的整个宽度? [英] How to make text take full width of it's container?

问题描述

假设div的宽度为300px，我将如何设置文本的字体大小，以使它始终占据100％的宽度，考虑到文本的长度永远不一样(文本是一些动态标题)由php生成).小文本的字体必须比大文本小得多，等等.

Say the div have 300px of width, how would I set the font-size of the text, so that it would always take 100% of the width, considering the text is never the same length (the text is some dynamic titles generated by php). Smaller text would have to have a font a lot smaller than the bigger text, etc

推荐答案

这帮了我大忙

div {
  text-align: justify;
}

div:after {
  content: "";
  display: inline-block;
  width: 100%;
}

但是，使用该技巧时，我不得不强制元素的高度以防止其添加新的空行.

However using that trick I had to force the height of my element to prevent it for adding a new empty line.

我从强制单元素中的文本行以用CSS填充宽度

也可以在此处查看解释: http://blog .vjeux.com/2011/css/css-one-line-justify.html

Also have look here for explanations: http://blog.vjeux.com/2011/css/css-one-line-justify.html

这篇关于如何使文本占据其容器的整个宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！