Media-List i Text-Overflow w Bootstrap 3.3.2

Question

Niedawno uaktualniłem swój projekt z Bootstrap 3.2.x do 3.3.2 (ostatnie wydanie) i odkryłem ważną różnicę z elementem Media Object.

chcę użyć w mediach-działu specjalnego mniej wstawek .text-przelewem(), aby dodać następujący atrybut CSS tytułem:

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

który działa dobrze (bardzo dobrze) w Bootstrap 3.2 , można go zobaczyć na poniższym plnkr: Media-List in 3.2

Ale ponieważ 3.3.x nie mogę używać wielokropek i text-overflow wewnątrz nagłówka: Media-List in 3.3.2

Możesz porównać obrazek poniżej: Jak zatem zachować to samo zachowanie, które opisuję przy pomocy Bootstrap 3.2 w Bootstrap 3.3.x? (Jest to bardzo przydatne na przykład dla użytkowników mobilnych).

Więcej informacji: Modyfikacja układu w obiekcie medialnym został wprowadzony w 3.3.0 i issue was opened (and closed) about this modification i miał reperkusje dla wielu użytkowników. Rozwiązaniem było ustawienie rozmiaru obiektu multimedialnego (media, media-body) na 10000px.

Answer 1

Wygląda na to, że przyczyną problemu jest display: table-cell; w poniższej regule. Zastąpienie go powinno rozwiązać problem.

.media-left, .media-right, .media-body { 
    display: table-cell; /* Here is the issue */ 
    vertical-align: top; 
} 

Dodawanie poniżej fragment wydaje się przywrócić działanie 3.2, ale kto wie, że inne problemy może to stworzyć z kodem 3.3.1 ...

.media-left, .media-right, .media-body { 
    display: block; 
} 

Również nie robi działa z najnowszą wersją (obecnie 3.3.2), ponieważ szerokość .media-body z jakiegoś powodu jest ustawiona na 10000px ... Zmiana na width: auto plus powyższa zmiana sprawiają, że działa ona w wersji 3.3.2. Ale znowu nie mam pojęcia, jakie inne problemy mogą to powodować.

.media-body { 
    width: 10000px; 
} 

Answer 2

miałem ten sam problem i rozwiązał ten problem w ten sposób:

.media-heading, 
.media-body > p, 
.media-body > span { 
    word-break: break-word; 
} 

Answer 3

Po MDO postanowił NOT naprawić ten błąd w v3 * jest tu moja praca arround:

.media-heading, .media-body > p, .media-body > span { 
    word-break: break-all; 
} 

Działa dla 92.19% z globalnie używanych przeglądarek.

Answer 4

Mam rozwiązać ten problem przez dodanie kolejnego pojemnika wewnątrz .media-ciała

.media-body{ 
    width: 10000px; 
    position: relative; //media body width overflow fix 
} 
//media body width overflow fix 
.media-body__width-fix { 
    position: absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
} 

Używany tak:

<div class="media-body"> 
    <div class="media-body__width-fix"> 
     <div class="your-ellipsis-overflow-class">your too long text</div> 
    </div> 
</div>