我需要将文本完全适应于100%宽度的
容器中。
我尝试使用letter-spacing
,但它似乎只接受px/em值,而不是百分比值... 但这不是响应式的(例如调整窗口大小)。
这是我得到的:http://jsfiddle.net/3N6Ld/
我应该采取其他方法吗?有什么想法吗?谢谢
我需要将文本完全适应于100%宽度的
我尝试使用letter-spacing
,但它似乎只接受px/em值,而不是百分比值... 但这不是响应式的(例如调整窗口大小)。
这是我得到的:http://jsfiddle.net/3N6Ld/
我应该采取其他方法吗?有什么想法吗?谢谢
如果你知道有多少个字母,你可以使用vw
(视口宽度)单位来实现。
在下面的示例中,我使用了14.29vw
的值,因为100(窗口宽度的100%)除以单词“CONTENT”中的7(字母数)约为14.29。
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
background: tomato;
height: 10%;
width: 100%;
}
.content {
color: white;
letter-spacing: 14.29vw;
overflow: hidden;
}
<div class="container">
<div class="content">
CONTENT
</div>
</div>
如果你想让"T"更靠近右边缘,你可以稍微增加letter-spacing
。对于Stack Overflow的代码片段,将其设置为14.67vw
即可:
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
background: tomato;
height: 10%;
width: 100%;
}
.content {
color: white;
letter-spacing: 14.67vw;
overflow: hidden;
}
<div class="container">
<div class="content">
CONTENT
</div>
</div>
如果你不需要语义化,只需要视觉效果的话,另一种解决方案是使用flexbox。
所以你有一个 <div id="#myText">TEXT 1</div>
我们需要得到这个:
<div id="#myText">
<span>T</span>
<span>E</span>
<span>X</span>
<span>T</span>
<span> </span>
<span>1</span>
</div>
那么你可以应用 CSS:
#myText {
display: flex;
flex-direction: row;
justify-content: space-between;
}
var words = $('#myText').text().split("");
$('#myText').empty();
$.each(words, function(i, v) {
if(v===' '){
$('#myText').append('<span> </span>');
} else {
$('#myText').append($("<span>").text(v));
}
});
justify-content:center
,因为对于较小的单词,使用 justify-content:space-between
会显得很奇怪。感谢您的提示! - elPastor#myText > span { min-width:0; }
以确保字母在需要时可以压缩。此外,不需要使用if()
语句,只需使用v.replace(' ',' ')
即可。 - elPastor<div class="container">
<div class="stretch">CONTENT</div>
</div>
jQuery :
$.fn.strech_text = function(){
var elmt = $(this),
cont_width = elmt.width(),
txt = elmt.text(),
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').strech_text();
$(window).resize(function () {
$('.stretch').strech_text();
});
});
CSS :
html, body{
height: 100%;
margin:0;
}
.container{
height: 10%;
background: red;
}
.stretch{
overflow-x:hidden;
}
.stretch_it{
white-space: nowrap;
}