Ellipsis z przepełnieniem tekstu nie działa z dynamiczną szerokością

nadzieję, że ktoś może pomóc.Ellipsis z przepełnieniem tekstu nie działa z dynamiczną szerokością

Mam 3 zagnieżdżone div. Rodzic, dzieci i dzieci.

Co chcę osiągnąć (motyw nie jest istotny) jest to, że dziecko otrzymuje względną szerokość w zależności od szerokości rodzica (procent), a dzieci dzieci muszą mieć przepełnioną elipsę w zależności od tej szerokości. Problem polega na tym, że jeśli użyję% w szerokości dla dzieci, to elipsa nie działa i jeśli zdefiniuję szerokość w pikselach, to działa.

Oto HTML

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

Oto jałowy 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; 
    }

Jednak w przypadku zmiany szerokości B za 122px działa idealnie (zauważ, że 122px powinna być równa 100%).

Można to sprawdzić tutaj: http://jsfiddle.net/vNRpw/4/

Dzięki!

Źródło

2013-05-08 Dan Stern

niepotrzebnego downvote. Jeśli zaktualizuję odpowiedź, wszyscy będą wiedzieli, że została rozwiązana, aby nikt nie tracił na nią czasu. To da mi czas na odpowiedź na pytanie. Dodatkowo, nie mogę zaznaczyć mojej odpowiedzi jako zaakceptowanej po dwóch dniach. W każdym razie, dzięki za sugestie –

Miał display: table; w pierwszym div, który był przyczyną problemów z elipsą. Jeśli to usuniesz, elipsa działa dobrze.

nie będę usunąć pytanie może pomóc ktoś

Sprawdź to działa tutaj: http://jsfiddle.net/vNRpw/6/

Źródło

2013-05-08 01:57:53

ta reguła spowodowała mnóstwo kłopotów z elipsą w moim kodzie. Na początku wygląda na to, że elipsa działa, dopóki nie zmieniłem rozmiaru DIV. Podjęcie pokazu: stół na stole działał idealnie. Dzięki! – Bildonia

Wyświetlacze kopalni w jednym wierszu bez przechodzenia do następnej linii DIV http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts – SearchForKnowledge

Dodaję elipsę w boku Bootstrap 'input-group', który ma' display: table'. Poza tym usuń 'display: table', czy jest jakiś inny sposób na rozwiązanie tego problemu? * Aktualizacja *: przechodzi do innego pytania: http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell –

Co o coś takiego:

<!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>

Główną zmianą było umieścić szerokość nieco mniej niż 100% na .c.

Źródło

2013-05-08 01:53:31

Kopalnia pozostaje w jednej linii i pokazuje elipsy. http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts – SearchForKnowledge

Ellipsis z przepełnieniem tekstu nie działa z dynamiczną szerokością

Odpowiedz

Powiązane problemy