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

【问题标题】：how to add dots (...) with the same width?如何添加具有相同宽度的点（...）？
【发布时间】：2016-11-28 09:55:00
【问题描述】：

演示和完整代码如下：https://jsfiddle.net/oscar11/Ldrntc8x/1/

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

还有：nm = 'iiiii iiiii iiiii iiiii iiiii iiiii iiiii iiiii';

宽度不一样

如何保持宽度不变？

在一些使用 css 宽度的教程中，但我对实现感到困惑

【问题讨论】：

你想达到什么目的？

标签： javascript jquery html css

【解决方案1】：

那么你应该使用等宽字体。

例如，添加font-family:"Menlo";（堆栈溢出用于代码块的那个：）

body{
  font-family: Menlo, monospace;
}

iiiii iiiii iiiii<br>
wkerh werce kjhvg

【讨论】：

嗯，我认为这实际上是一个非常糟糕的例子。默认情况下，Menlo 在任何 Windows 机器上都是未知的。而且你永远不应该使用没有引号的自定义字体名称，而不是单独使用。始终为通用字体类型添加后备，例如：font-family: "Menlo", monospace;。

【解决方案2】：

我在另一个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>

【讨论】：

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

【讨论】：

【解决方案4】：

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

div {
    font-family: monospace;
}

Working example.

【讨论】：