问题
i need to fit completely a text in a 100% width div container.
I attempted using letter-spacing
but it looks like only accepts px/em, and not percent values.. but that wont be responsive (e.g. resizing window).
This is what i got: http://jsfiddle.net/3N6Ld/
Should i take another approach? Any ideas? Thank you
回答1:
If you know how many letters you have you can sort of achieve this using the vw
(viewport width) unit.
In the below example I've used a value of 14.29vw
, as 100 (100% of the width of the window) divided by 7 (the number of letters in the word "CONTENT") is roughly 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>
If you want to make the "T" closer to the right edge you can increase the letter-spacing
a little. For Stack Overflow's code snippets, setting it to 14.67vw
does the trick:
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>
回答2:
Another solution if you don't have to be semantic, I mean if you need only the visual result, is to use flexbox.
So you have your <div id="#myText">TEXT 1</div>
We need to get this:
<div id="#myText">
<span>T</span>
<span>E</span>
<span>X</span>
<span>T</span>
<span> </span>
<span>1</span>
</div>
So then you can apply CSS:
#myText {
display: flex;
flex-direction: row;
justify-content: space-between;
}
In order to transform the text to span you can use jQuery or whatever. Here with jQuery:
var words = $('#myText').text().split("");
$('#myText').empty();
$.each(words, function(i, v) {
if(v===' '){
$('#myText').append('<span> </span>');
} else {
$('#myText').append($("<span>").text(v));
}
});
For better results remove put letter-spacing: 0 into #myText so any extra spacing will be applied.
回答3:
I wrote a jQuery snippet that calculates the letter spacing to apply so that the text uses the whole width of it's container : Stretch text to fit width of div.
You may apply it to the text and fire it on window resize so letter-spacing is recalculated when the browser is resized :
DEMO
HTML :
<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;
}
来源:https://stackoverflow.com/questions/24557411/css-letter-spacing-percent-to-completely-fit-the-div-container