Разрыв строки после дефиса

Question

При запуске следующего фрагмента на FF 45 в первом из двух полей отображается только одна строка, такая как «ThisIsATest ...», а во втором окне показаны две строки с текстом, деленным на дефис , В Chrome и Edge оба окна показывают две строки. Мой вопрос: как я могу сделать текст в первом разрыве после дефиса в FF? Очевидно, что это имеет какое-то отношение к длине следующего текста, но в чем причина этого?

.test { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    background: #00bcd4; 
 
    margin-bottom: 1rem; 
 
}

<div class="test"> 
 
    ThisIsATest-Test 
 
</div> 
 

 
<div class="test"> 
 
    ThisIsATest-Test123 
 
</div>

Я хочу добиться такого поведения (который уже работает в Chrome и Edge): Если текст не содержит никаких дефисов и пробелов, не разбить его и показать». .. ". Если текст содержит пробел или дефис, сломайте его, если необходимо.

Update:

Вы можете удалить текст переполнение: многоточие и получить аналогичный результат. Теперь текст иногда прерывается, иногда появляется новая строка. Я не вижу причин, почему два подобных divs (один с немного большим содержанием) должны проявлять такое другое поведение.

.test { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    background: #00bcd4; 
 
    margin-bottom: 1rem; 
 
}

<div class="test"> 
 
    ThisIsATest-Test 
 
</div> 
 

 
<div class="test"> 
 
    ThisIsATest-Test123 
 
</div>

В FF 45.0.1 на Windows 10, она в настоящее время выглядит следующим образом:

Answer 1

Если это "реальный" дефис (то есть, если вы не» t нужно, чтобы «-» отображалось, когда все вписывается в одну строку), вы можете использовать объект «мягкого дефиса» ­:

ThisIsATest­Test 

Answer 2

Добавьте свойства word-wrap: break-word; или white-space: nowrap; к вашему тестовому классу, и оба divs будут производить одинаковое поведение.

Например:

перенос слов: обкатки слово;

Будет производить две линии.

.test { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    word-wrap: break-word; 
 
    text-overflow: ellipsis; 
 
    background: #00bcd4; 
 
    margin-bottom: 1rem; 
 
}

<div class="test"> 
 
    ThisIsATest-Test 
 
</div> 
 

 
<div class="test"> 
 
    ThisIsATest-Test123 
 
</div>

бело-пространство: Nowrap;

Производит одну линию с многоточием.

.test { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    background: #00bcd4; 
 
    margin-bottom: 1rem; 
 
}

<div class="test"> 
 
    ThisIsATest-Test 
 
</div> 
 

 
<div class="test"> 
 
    ThisIsATest-Test123 
 
</div>

Answer 3

Я нашел этот трюк на этом blog, но я не знаю, если будет решить вашу проблему.

.test { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    background: #00bcd4; 
 
    margin-bottom: 1rem; 
 

 
    -ms-word-break: break-all; 
 
    word-break: break-all; 
 

 
    word-break: break-word; 
 

 
    -webkit-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    hyphens: auto; 
 
}

<div class="test"> 
 
    ThisIsATest-Test 
 
</div> 
 

 
<div class="test"> 
 
    ThisIsATest-Test123 
 
</div>