how to add dots (...) with the same width?

Question

Demo and full code is like this : https://jsfiddle.net/oscar11/Ldrntc8x/1/

When I using : nm = 'chelsea chelsea chelsea chelsea chelsea chelsea chelsea';

And : nm = 'iiiii iiiii iiiii iiiii iiiii iiiii iiiii iiiii';

Its width is different

How to keep it the same width?

In some tutorials using css width, but I am confused implementing

what do you want to achieve? – madalinivascu Jul 25 '16 at 06:50 — madalinivascu, Jul 25 '16 at 06:50

nicael · Accepted Answer · 2016-07-25T08:42:30.813

3

You should use a monospace font then.

E.g., add font-family:"Menlo"; (the one Stack Overflow uses for code blocks :)

body{
  font-family: Menlo, monospace;
}

iiiii iiiii iiiii<br>
wkerh werce kjhvg

edited Jul 25 '16 at 08:42

answered Jul 25 '16 at 06:49

nicael

18,550
13
57
90

Well, I think this is actually a pretty bad example. `Menlo` is not known on any windows machine by default. And you should never use a custom font name without quotes, and not as stand alone. Always add a fallback for generic font types, like: `font-family: "Menlo", monospace;`. – eisbehr Jul 25 '16 at 08:36

score 3 · Answer 2 · answered Jul 25 '16 at 06:51

3

The only way I would know is to add a monospace font to your output element:

div {
    font-family: monospace;
}

Working example.

answered Jul 25 '16 at 06:51

eisbehr

12,243
7
38
63

score 0 · Answer 3 · answered Jul 25 '16 at 06:54

<div class="test">
    chelsea chelsea chelsea chelsea chelsea chelsea chelsea
</div>

<div class="test">
    iiiii iiiii iiiii iiiii iiiii iiiii iiiii iiiii
</div>

In CSS:

.test {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

I updated your fiddle: https://jsfiddle.net/Lwpv1frd/1/

Remove javascript. I think this can help you. Depends on how you will use it. Cheers!

score 0 · Answer 4 · edited May 23 '17 at 11:45

I saw this posted on another SO post, i think it might help. You can use it with any font you like.

$.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>

how to add dots (...) with the same width?

4 Answers4