拉伸文本以适应div的宽度

我有一个固定宽度的div，但div内的文本可以改变。

有没有一种方式设置，用CSS或其他， 字母之间的间距，所以文本总是完美填补div？

Answer 1

正如马克所说， text-align:justify; 是最简单的解决scheme。 不过，对于简短的文字来说，它不会有任何效果。 以下jQuery代码将文本拉伸到容器的宽度。

它计算每个字符的空间，并相应地设置letter-spacing ，使文本延伸到容器的宽度 。

如果文本太长而无法放入容器，则可以将其展开到下一行并设置text-align:justify; 到文本。

这里是一个演示：

 $.fn.strech_text = function(){ var elmt = $(this), cont_width = elmt.width(), txt = elmt.html(), one_line = $('<span class="stretch_it">' + txt + '</span>'), nb_char = elmt.text().length, spacing = cont_width/nb_char, txt_width; elmt.html(one_line); txt_width = one_line.width(); if (txt_width < cont_width){ var char_width = txt_width/nb_char, ltr_spacing = spacing - char_width + (spacing - char_width)/nb_char ; one_line.css({'letter-spacing': ltr_spacing}); } else { one_line.contents().unwrap(); elmt.addClass('justify'); } }; $(document).ready(function () { $('.stretch').each(function(){ $(this).strech_text(); }); }); 

 p { width:300px; padding: 10px 0;background:gold;} a{text-decoration:none;} .stretch_it{ white-space: nowrap; } .justify{ text-align:justify; } .one{font-size:10px;} .two{font-size:20px;} .three{font-size:30px;} .four{font-size:40px;} .arial{font-family:arial;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="stretch one">Stretch me</p> <p class="stretch two">Stretch me</p> <p class="stretch three">Stretch <a href="#">link</a></p> <p class="stretch two">I am too slong, an I would look ugly if I was displayed on one line so let me expand to several lines and justify me.</p> <p class="stretch arial one">Stretch me</p> <p class="stretch arial three">Stretch me</p> <p class="stretch arial four">Stretch me</p> <p class="arial two">Don't stretch me</p> 

Answer 2

这可以通过text-align:justify和一个小小的黑客来完成。 看到这里： http : //codepen.io/aakilfernandes/pen/IEAhF/

诀窍是在伪装成长单词的文本之后添加一个元素。 假字实际上是一个带有display:inline-block的span元素display:inline-block和width:100% 。

在我的例子中，假词是红色的，高度为1em，但是黑客甚至没有它。

Answer 3

也许这可以帮助：

 text-align:justify; 

Answer 4

更容易的HTML / CSS方法将是使用flexbox。 它也立即响应。 但值得注意的是，如果您将它用作h1或其他东西，SEO就不会select它。

HTML：

 <div class="wrapper"> <div>H</div> <div>e</div> <div>l</div> <div>l</div> <div>o</div> <div>&nbsp</div> <div>W</div> <div>o</div> <div>r</div> <div>l</div> <div>d</div> 

CSS：

 .wrapper{ width: 100%; text-align: center; display: flex; flex-flow: row nowrap; justify-content: space-between; border: 1px solid black; } 

jsfiddle在这里

Answer 5

我想你实际上是在寻找缩放比例。

用一些漂亮的分辨率渲染你的字体，然后使用JS通过使用CSS变换将其拉伸到容器：

 transform: scale(1.05); 

这样做的好处是，你的文本总是会很聪明，但是你会遇到它变得太小而不能被读取的问题。

快速注意的是，你需要使你想要缩小/扩大的元素具有绝对的位置：

 position: absolute; 

Answer 6

我find了比一行更短的文本的更好的解决scheme，没有任何额外的js或标签，只有一个类。

 .stretch{ /* We got 2rem to stretch */ width: 5rem; /* We know we only got one line */ height: 1rem; text-align: justify; } .stretch:after{ /* used to stretch word */ content: ''; width: 100%; display: inline-block; } 

 <div class="stretch">你好么</div> <div class="stretch">你好</div> 

Answer 7

jsfiddle链接

对于纯粹的HTML / CSS解决scheme，甚至对于较短的文本（足够短

 text-align: justify; 

不会工作）

我遵循这个伟大的职位作为一个灵感，并把每个字母在一个div

HTML：

 <div class="wrapper"> <div class="letters">H</div> <div class="letters">e</div> <div class="letters">l</div> <div class="letters">l</div> <div class="letters">o</div> <div class="letters">&nbsp</div> <div class="letters">W</div> <div class="letters">o</div> <div class="letters">r</div> <div class="letters">l</div> <div class="letters">d</div> <span class="stretch"></span> </div> 

CSS：

 .wrapper { width: 300px; /*for example*/ border: 1px solid gray; /*only for demonstrative purposes*/ text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; } .letters { vertical-align: top; display: inline-block; *display: inline; zoom: 1 } .stretch { width: 100%; display: inline-block; font-size: 0; line-height: 0 }