Эллипсис текста CSS и 100-процентная ширина

У меня есть следующий контейнер с текстом:

<div class="cardTitles">

<div class="title">
    <div class="titleContent">
        <i class="fa fa-star-o"></i>
        <b>Some long long long title here</b>
        <a href="some href"></a>
    </div>
</div>

... title divs ...

</div>

CSS

.cardTitles {
    width: 100%;
    height: 100%;
}

.title
{
    position: relative;

    padding-top: 8px;
    padding-bottom: 8px;
}

Я хочу сделать текст полной шириной + переполнением текста: эллипсис. Поэтому, когда я изменяю размер браузера, все теги title должны быть полными 100% -ной шириной родительского cardTitles с вырезанным текстом до трех точек в конце.

Я обнаружил, что это возможно с использованием flex. Вот возможный ответ:

.parent-div {
    display: flex;
}

.text-div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    

    min-width: 0;
}

Но это не работает для меня. Родительский контейнер перестает изменять размер, когда он достигает максимальной длины некоторого титула ребенка.

Здесь вы можете найти пример: http://88.198.106.150/tips/cpp/

Попробуйте изменить размер браузера и посмотреть заголовок с текстом: What does it mean that a reference must refer to an object, not a dereferenced NULL pointer. Мне нужно сделать многократное переполнение.

ОТВЕТЫ

Ответ 1

Попробуйте это:

.titleContent {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Вот и обновил jsFiddle

Ответ 2

Ширина должна быть добавлена ​​в пикселях, процентная доля не будет работать вместе с другими тремя свойствами, как указано ниже: -

.text-ellipsis{
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Ответ 3

#div1 {
   white-space: nowrap; 
   width: 12em; 
   overflow: hidden;
   text-overflow: clip; 
   border: 1px solid #000000;
}

 #div2 {
   white-space: nowrap; 
   width: 12em; 
   overflow: hidden;
   text-overflow: ellipsis; 
   border: 1px solid #000000;
}

Следующие два div содержат длинный текст, который не помещается в поле. Как вы можете видеть, текст обрезается.

Этот div использует "text-overflow: clip":

Это длинный текст, который не помещается в поле

Этот div использует "text-overflow: ellipsis":

Это длинный текст, который не помещается в поле