如何添加具有相同宽度的点（...）？

Question

演示和完整的代码是这样的：https://jsfiddle.net/oscar11/Ldrntc8x/1/

当我使用：nm = 'chelsea chelsea chelsea chelsea chelsea chelsea chelsea';

和：nm = 'iiiii iiiii iiiii iiiii iiiii iiiii iiiii iiiii';

它的宽度是不同的

如何保持相同的宽度？

在使用CSS宽一些教程，但我很困惑实施

Answer 1

您应该使用等宽字体，然后。

比如，ADD font-family:"Menlo";（在一个堆栈溢出使用代码块:)

body{ 
 
    font-family: Menlo, monospace; 
 
}

iiiii iiiii iiiii<br> 
 
wkerh werce kjhvg

Answer 2

我会知道的唯一方法是将monospace字体添加到您的输出元素：

div { 
    font-family: monospace; 
} 

Working example.

Answer 3

<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。我认为这可以帮助你。取决于你将如何使用它。干杯!

Answer 4

我看到这张贴在另一个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>