Как добавить точки (...) с одинаковой шириной?

Demo и полный код выглядит так: https://jsfiddle.net/oscar11/Ldrntc8x/1/Как добавить точки (...) с одинаковой шириной?

Когда я с помощью: nm = 'chelsea chelsea chelsea chelsea chelsea chelsea chelsea';

И: nm = 'iiiii iiiii iiiii iiiii iiiii iiiii iiiii iiiii';

Его ширина отличается

Как держать это такие же ширины?

В некоторых учебных пособиях с использованием ширины CSS, но я запутался реализация

источник

2016-07-25 samuel toh

что вы хотите достичь? – madalinivascu

Вы должны использовать моноширинный шрифт затем.

Например, добавьте font-family:"Menlo"; (один переполнение стека используется для блоков кода :)

body{ 
 
    font-family: Menlo, monospace; 
 
}

iiiii iiiii iiiii<br> 
 
wkerh werce kjhvg

источник

2016-07-25 06:49:59 nicael

Ну, я думаю, что это на самом деле довольно плохой пример. «Menlo» по умолчанию неизвестно ни на одной машине Windows. И вы никогда не должны использовать собственное имя шрифта без кавычек, а не как самостоятельное. Всегда добавляйте резерв для общих типов шрифтов, например: 'font-family:« Menlo », monospace;'. – eisbehr

@eis Я бы сказал, что это уже довольно общий, но все в порядке. – nicael

Единственный способ, которым я бы знать, чтобы добавить monospace шрифт в свой выходной элемент:

div { 
    font-family: monospace; 
}

Working example.

источник

2016-07-25 06:51:33 eisbehr

<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. Я думаю, это может вам помочь. Зависит от того, как вы будете его использовать. Ура!

источник

2016-07-25 06:54:10

Я видел это, размещенное на другом 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>

источник

2016-07-25 07:00:40

Как добавить точки (...) с одинаковой шириной?

ответ

Смежные вопросы