CSS 如何使文本占据其容器的全宽？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17538151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make text take full width of it's container?
提问by
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 的宽度为 300px，我将如何设置文本的字体大小，以便它始终占据宽度的 100%，考虑到文本的长度永远不会相同（文本是一些由 php 生成的动态标题） ）。较小的文本的字体必须比较大的文本小很多，等等
回答by svassr
this did the trick for me
这对我有用
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.
但是使用这个技巧我不得不强制我的元素的高度以防止它添加一个新的空行。
I took that answer from Force single line of text in element to fill width with CSS
我从Force single line of text in element to fill width with CSS 中得到了这个答案
Also have look here for explanations: http://blog.vjeux.com/2011/css/css-one-line-justify.html
也有看这里的解释：http: //blog.vjeux.com/2011/css/css-one-line-justify.html
回答by apartridge
What you ask can probably not be done. text-align:justifywill make paragraph text extend to the right side, but you cannot adjust the size of a header so its 100% of the width.
您所要求的可能无法完成。text-align:justify将使段落文本扩展到右侧，但您无法调整标题的大小，使其达到 100% 的宽度。
Edit: Well, actually, a JS library exist that seems to do this. http://fittextjs.com. Still, no pure-CSS solution is available.
编辑：嗯，实际上，有一个 JS 库似乎可以做到这一点。http://fittextjs.com。尽管如此，仍然没有可用的纯 CSS 解决方案。
回答by patrick
The solution provided by @svassr combined with font-size: *vwgave me the desired result. So:
@svassr 提供的解决方案结合font-size: *vw给了我想要的结果。所以：
div {
text-align: justify;
font-size: 4.3vw;
}
div:after {
content: "";
display: inline-block;
width: 100%;
}
the vwstands for viewport width, in this example 4.3% of the width of the viewport. Play around with that to get your text fit on one line. Combined with @svassr's solution this worked like a charm for me!
的vw代表viewport width，在该示例中，视口的宽度的4.3％。玩弄它以使您的文本适合一行。结合@svassr 的解决方案，这对我来说就像一个魅力！
回答by pomber
I've created a web component for this:
https://github.com/pomber/full-width-text
我为此创建了一个 Web 组件：https:
//github.com/pomber/full-width-text
Check the demo here:
https://pomber.github.io/full-width-text/
在此处查看演示：https:
//pomber.github.io/full-width-text/
The usage is like this:
用法是这样的：
<full-width-text>Lorem Ipsum</full-width-text>
回答by Maciej Korsan
I've prepared simple scale function using css transform instead of font-size.
我已经使用 css 变换而不是字体大小准备了简单的缩放功能。
Blog post: https://blog.polarbits.co/2017/03/07/full-width-css-js-scalable-header/
博文：https: //blog.polarbits.co/2017/03/07/full-width-css-js-scalable-header/
The code:
编码：
function scaleHeader() {
var scalable = document.querySelectorAll('.scale--js');
var margin = 10;
for (var i = 0; i < scalable.length; i++) {
var scalableContainer = scalable[i].parentNode;
scalable[i].style.transform = 'scale(1)';
var scalableContainerWidth = scalableContainer.offsetWidth - margin;
var scalableWidth = scalable[i].offsetWidth;
scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
}
}
Working demo: https://codepen.io/maciejkorsan/pen/BWLryj
