Как обрезать текст при маленьком разрешении вставив между многоточие ...?

Question

[Taron4uk]

Как пример:
Из текста someblablalblatestdevhost.ru
На выходе получить:
someblablalblatest...st.ru

Пытался сделать что-то подобное, только не знаю как делать дальше (новичок в JS).

let myStr = 'someblablalblatestdevhost.ru';
let myArr = myStr.split('.');
let myShortname = myArr.splice(-1); 
let myDomainBase = myArr[myArr.length-1];

Comments

[Дмитрий]

1) первая часть текста .slice(0, 18)
2) вторая часть текста .slice(-4)
3) осталось только конкатенировать

Answer 1

[Андрей]

var myStr = 'someblablalblatestdevhost.ru';
var dot = myStr.lastIndexOf(".");
var myShortname = myStr.slice(0, dot); 
var myDomainBase = myStr.slice(dot + 1);
if (myShortname.length > 10) {
    myShortname = myShortname.slice(0, 3) + "..." + myShortname.slice(-3);
}

Comments

[Андрей]

Taron4uk, ты серьёзно щас? аргументами slice() обрезай сколько хочешь, я пример показал

[Taron4uk]

Спасибо огромное)

Answer 2

[Andrew]

https://codepen.io/kickerock/pen/XWWvvLW

Comments

[Andrew]

Taron4uk, Глазами посчитайте кол-во символов или regexpom найдите нужные символы и посчитайте. Удачи

[Taron4uk]

Спасибо огромное!

Answer 3

[Николай Чуприк]

Можно воспользоваться CSS-свойством text-overflow: ellipsis, которое обрезает не влезающий текст многоточием. В вашей ситуации можно разбить url на два блока:

| someblablalblatestdevho | st.ru |

Первый блок сделать резиновым с text-overflow: ellipsis, а второй жёстким.