拉伸文本以適合div的寬度

Question

我有一個固定寬度的div，但div內的文本可以更改。

有沒有辦法用css或其他設置字母之間的間距，所以文本總是完美地填充div？

Answer 1

也許這可以幫助：

text-align:justify; 

Answer 2

這可以用text-align:justify和小黑客來完成。看到這裏：http://codepen.io/aakilfernandes/pen/IEAhF/

訣竅是添加一個元素後面的文字，假裝是真正的長詞。假字實際上是span元素，其中display:inline-block和width:100%。

在我的例子中，假詞是紅色的，高度爲1em，但即使沒有它，黑客也能正常工作。

Answer 3

正如Mark所說，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 fiddle demo

Answer 4

jsfiddle link

對於一個純粹的HTML/CSS的解決方案，甚至更短的文本（簡稱足夠

text-align: justify; 

是行不通的）

我跟着this great post爲靈感，並放在一個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 
} 

Answer 5

更簡單的HTML/C SS方法將使用flexbox。 它也立即響應。但值得注意的是，如果您將它用作h1或其他東西，它不會選擇它。

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 here

Answer 6

我想你實際上是尋找正在擴大。

渲染你的字體與一些好看的分辨率是有道理的，然後用JS使用CSS來其拉伸至容器轉變：

transform: scale(1.05); 

這樣做的好處是，你的文字永遠機智，但是你會遇到它變得太小而不能被讀取的問題。

快速值得注意的是，你需要讓你試圖縮小/擴大元素具有絕對位置：

position: absolute; 

Answer 7

我發現多行文本短的更好的解決方案，沒有任何多餘的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 8

所以，還是蠶食這個問題的邊緣，如果你從另一個線程結合沃納的answer that stretches short lines of text與此suggestion to use a real element，你可以做這件事，而無需一個:after僞類。

你代替了一個實際的元素，並把它放在之後你想證明的一個。而這將觸發以同樣的方式在兩端對齊：

header { 
 
    background-color: #ace; 
 
    text-align: justify; 
 
} 
 

 
.hack { 
 
    display: inline-block; 
 
    width: 100%; 
 
}

<header> 
 
    <div> 
 
    A line of text to justify 
 
    <div class="hack"></div> 
 
    </div> 
 
</header>

這種變化，您可以使用這一招有反應，樣式對象：

const style = { 
 
    backgroundColor: '#ace', 
 
    textAlign: 'justify' 
 
}; 
 

 
const hack = { 
 
    display: 'inline-block', 
 
    width: '100%' 
 
}; 
 

 
const example = (
 
    <header style={ style }> 
 
    <div> 
 
     A line of words to stretch 
 
     <div style={ hack } /> 
 
    </div> 
 
    </header> 
 
); 
 

 
ReactDOM.render(example, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="root"></div>

這已經夠醜陋了，但從那裏你會有我們可以選擇你想要「固定」容器多餘高度的方法：容器的固定高度或負邊距？相關定位和從以下元素重疊？將容器背景與頁面背景相匹配，並假裝像額外的邊距是故意的？