拉伸文本以适合div的宽度

Question

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

是否有一种方法用css或其他方式设置字母之间的间距,以便文本总是完美地填充div？

Answer 1

正如马克所说,这text-align:justify;是最简单的解决方案.但是,对于简短的文字,它不会有任何影响.以下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>

Js小提琴演示

Answer 2

这可以通过text-align:justify一个小的黑客来完成.见:http://codepen.io/aakilfernandes/pen/IEAhF/

诀窍是在假装长字的文本之后添加一个元素.假字实际上是和的一个span元素.display:inline-blockwidth:100%

在我的例子中,伪造的单词是红色的,并且高度为1em,但即使没有它,黑客也会工作.

Answer 3

也许这可以帮助:

text-align:justify;

Answer 4

我发现一个更好的解决方案,短于一行的文本,没有任何额外的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 5

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

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 6

有点晚了，但对于简单、纯 CSS 实现，请考虑使用flexbox：

h1.stretch {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<h1 class="stretch">
  <span>F</span>
  <span>o</span>
  <span>o</span>
  <span>B</span>
  <span>a</span>
  <span>r</span>
</h1>

不确定将每个字母包装在span（注意任何元素都可以）中是否会扰乱 SEO，但我想搜索引擎会从innerHTML用于重要标记（例如标题等）的标签中删除标签。（了解 SEO 的人可以确认吗？ ）