演示和完整的代碼是這樣的:https://jsfiddle.net/oscar11/Ldrntc8x/1/如何添加具有相同寬度的點(...)?
當我使用:nm = 'chelsea chelsea chelsea chelsea chelsea chelsea chelsea';
和:nm = 'iiiii iiiii iiiii iiiii iiiii iiiii iiiii iiiii';
它的寬度是不同的
如何保持相同的寬度?
在使用CSS寬一些教程,但我很困惑實施
演示和完整的代碼是這樣的:https://jsfiddle.net/oscar11/Ldrntc8x/1/如何添加具有相同寬度的點(...)?
當我使用:nm = 'chelsea chelsea chelsea chelsea chelsea chelsea chelsea';
和:nm = 'iiiii iiiii iiiii iiiii iiiii iiiii iiiii iiiii';
它的寬度是不同的
如何保持相同的寬度?
在使用CSS寬一些教程,但我很困惑實施
您應該使用等寬字體,然後。
比如,ADD font-family:"Menlo";
(在一個堆棧溢出使用代碼塊:)
body{
font-family: Menlo, monospace;
}
iiiii iiiii iiiii<br>
wkerh werce kjhvg
<div class="test">
chelsea chelsea chelsea chelsea chelsea chelsea chelsea
</div>
<div class="test">
iiiii iiiii iiiii iiiii iiiii iiiii iiiii iiiii
</div>
在CSS:
.test {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
我更新了你的提琴:https://jsfiddle.net/Lwpv1frd/1/
刪除的JavaScript。我認爲這可以幫助你。取決於你將如何使用它。乾杯!
我看到這張貼在另一個SO post,我認爲這可能會有所幫助。 你可以使用任何你喜歡的字體。
$.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 {
background:gold;
width:300px;
padding: 10px 0;
}
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/1.12.4/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>
你怎麼想達到什麼目的? – madalinivascu