эллипсис с переполнением текста не работает с динамической шириной

надеюсь кто-то может помочь.эллипсис с переполнением текста не работает с динамической шириной

У меня есть 3 гнезда div. Родители, дети и дети детей.

То, что я хочу выполнить (мотив не имеет значения), заключается в том, что этот ребенок получает относительную ширину в зависимости от ширины родительского элемента (в процентах), а дети детей должны иметь эллипсис переполнения в зависимости от этой ширины. Проблема в том, что если я использую% в ширине детей, то многоточие не работает, и если я определяю ширину в пикселях, он работает.

Вот HTML

<div class="a"> 
    <div class="b"> 
     <div class="c"> 
     Here should go some text long enough to ellipsis the overflow 
     </div> 
    </div> 
</div>

Вот нерабочего CSS

.a { 
     border:black 1px solid; 
     float: left; 
     width: 122px; 
     display: table; 
     line-height: 14px; 
    } 
    .b { 
     width:100%; 
     color: black; 
     font-size: 14px; 
     text-transform: uppercase; 
     cursor: pointer; 
    } 
    .c { 
     line-height: 11px; 
     width: 100%; 
     text-overflow: ellipsis; 
     overflow: hidden; 
     white-space:nowrap; 
    }

Однако если я изменить ширину B для 122px он отлично работает (обратите внимание, что 122px должен быть равен 100%).

Вы можете проверить его здесь: http://jsfiddle.net/vNRpw/4/

Спасибо!

источник

2013-05-08 Dan Stern

ненужную downvote. Если бы я обновил ответ, все бы знали, что он был решен, поэтому никто не тратит время на это. Это даст мне время для ответа на вопрос. Кроме того, я не могу отметить свой собственный ответ, как принято после двух дней. В любом случае, спасибо за предложения –

Был display: table; в первом дивизионе, который вызывал проблемы с эллипсисом. Если вы удалите это, то многоточие отлично работает.

Я не буду удалять этот вопрос может помочь кому-то

Проверьте это работает здесь: http://jsfiddle.net/vNRpw/6/

источник

2013-05-08 01:57:53

Это правило вызвало массу проблем с эллипсисом в моем коде. Сначала это выглядит как эллипсис, пока я не изменил размер DIV. Принимая дисплей: таблица отлично работала. Благодаря! – Bildonia

Отображение шахты в одной строке без перехода на следующую строку DIV http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts – SearchForKnowledge

Я добавляю многоточие в сторону Bootstrap 'input-group', который имеет' display: table'. Кроме того, удалите 'display: table', любой другой способ разрешить это? * Обновление *: он обращается к другому вопросу: http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell –

А что-то вроде этого:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

.a { 
    border:black 1px solid; 
    float: left; 
    width: 50%; 
    line-height: 14px; 
} 
.b { 
    width:100%; 
    color: black; 
    font-size: 14px; 
    text-transform: uppercase; 
    cursor: pointer; 
} 
.c { 
    line-height: 11px; 
    width: 98%; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space:nowrap; 
} 

</style> 

</head> 
<body> 

<div class="a"> 
    <div class="b"> 
     <div class="c"> 
     Here should go some text long enough to ellipsis the overflow 
     </div> 
    </div> 
</div> 

</body> 
</html>

Основное изменение было поставить ширину чуть меньше, чем 100% от .c.

источник

2013-05-08 01:53:31

Шахта остается в одной строке и показывает эллипсы. http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts – SearchForKnowledge

эллипсис с переполнением текста не работает с динамической шириной

ответ

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