Tablo hücresindeki metni taşma, bu nedenle tablo tablodan daha geniş gitmiyor

Question

Tablo biçiminde çeşitli öğeleri görüntülemeye çalışıyorum (her girişin çeşitli özellikleri vardır). Aşağıdaki da gereklidir:

1. Sütun dinamik olmalıdır kadar sıkı bir uyum içeriği,
2. satır örneğin o satırın girişi, bir eylem etkinleştirmek için tıklanabilr olduğu (Tablo düzenleri tarafından ele) bir sabit genişlikleri Bu içeriğin genişletilmiş sürümüyle yeni sayfa göster (örnek kod olarakyerine CSS display: table/table-row/table-cell kullanılarak işlenir). (Benim için başka bir neden, HTML'yi üreten JSF'yi kullanmamdır, ancak bunu kullanmamla birlikte kalmamı engeller.)
3. Bunu doğru alamıyorum: Tablo, ekran genişliğinin dışında kalınsa mümkün. Özellikle, bir "özet" sütunu, gerektiğinde kesilmesi gereken (potansiyel olarak uzun) bir metni gösterir, böylece metin, ekran genişliğinden daha geniş olmayan, masa genişliğine uyarlanmış olan hücreye sığar.
   • Bu özette, CSS text-overflow: ellipsis'u diğer gerekli ayarlarla birlikte kullanıyorum. Çevresindeki zaten, ellipsis özniteliği needs an inline/block element ise, "özet" metin başka bir <div> sarılır. Bu I (DEĞİL idealdir elde etmek şu anda mümkün neysem iken

     : Burada

istenen etkisinin bir örneği (altta YOK kaydırma çubuğu unutmayın)) (Alttaki not kaydırma çubuğu - tablonun sağdaki pencereden çalıştığını gösterir):

Bunu başarmak için barebone kodu (/*l&f*/ (görünüm ve izlenim) ile işaretlenmiş tüm nitelikleri atlayabiliriz, yalnızca daha temiz, daha kolay hata ayıklama örneği oluşturmaları amaçlanır).

CSS ve HTML:

A { 
 
    /*l&f*/text-decoration: inherit; 
 
    /*l&f*/color: inherit; 
 
} 
 
.list-table { 
 
    display: table; 
 
    /*l&f*/border: 1px solid blue; 
 
    /*l&f*/border-spacing: 5px; 
 
} 
 
.list-tr { 
 
    display: table-row; 
 
    /*l&f*/background-color: lightgray; 
 
} 
 
.list-td { 
 
    display: table-cell; 
 
    white-space: nowrap; /* one line */ 
 
    /*l&f*/padding: 2px; border : 1px solid green; 
 
    /*l&f*/border: 1px solid red; 
 
} 
 
.summary { 
 
    display: block; 
 
    white-space: nowrap; /* one line */ 
 
    overflow: hidden; /* make text overflow */ 
 
    text-overflow: ellipsis; /* truncate tex with ... */ 
 
    /*l&f*/background-color: lightblue; 
 
}

<div class="list-table"> 
 
    <a href="#1" class="list-tr"> 
 
    <div class="list-td">Row 1</div> 
 
    <div class="list-td">More stuff</div> 
 
    <div class="list-td"> 
 
     <div class="summary">Some single line run on text goes here</div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#2" class="list-tr"> 
 
    <div class="list-td">Row 2</div> 
 
    <div class="list-td">Other column</div> 
 
    <div class="list-td"> 
 
     <div class="summary">This is text content that runs on and on 
 
     and on without end and may need to be truncated somewhere on the 
 
     summary screen depending on screen size to show only the first part 
 
     that will fit.</div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#3" class="list-tr"> 
 
    <div class="list-td">Row 3</div> 
 
    <div class="list-td">Still other content</div> 
 
    <div class="list-td"> 
 
     <div class="summary">Here is still more long text that may 
 
     need truncation in the summary version because it is so long.</div> 
 
    </div> 
 
    </a> 
 
</div>

ben summary tarzında, display: -moz-box (ve diğer çeşitli -moz- ayarlarla) ile istenilen sonucu elde etmek mümkün olmuştur. Mutlu değil çünkü bu platformlar arası değil.

Daha iyi bir öneriniz var mı? Yardımınız için teşekkür ederiz :-)

Answer 1

Dışa aktarılan HTML'nizde değişiklik yapabilirseniz, olası bir çözümünüz var demektir.

Ben HTML'nize birkaç değişiklik yapılmış bakınız aşağıda SNIPPET

(table-layout:fixed kullanarak sabit bir tablo oluşturmak için, .summary bir üst div eklendi):

A { 
 
    /*l&f*/ 
 
    text-decoration: inherit; 
 
    /*l&f*/ 
 
    color: inherit; 
 
} 
 
.list-table { 
 
    display: table; 
 
    /*l&f*/ 
 
    border: 1px solid blue; 
 
    /*l&f*/ 
 
    border-spacing: 5px; 
 
    width: 100%; /* ADDED */ 
 
} 
 
/* CREATED */ 
 
.fixed-table { 
 
    width:100%; 
 
    table-layout: fixed; 
 
    display:table 
 
} 
 

 
.list-tr { 
 
    display: table-row; 
 
    /*l&f*/ 
 
    background-color: lightgray; 
 
} 
 
.list-td { 
 
    display: table-cell; /* CHANGED */ 
 
    white-space: nowrap; 
 
    /* one line */ 
 
    /*l&f*/ 
 
    padding: 2px; 
 
    border: 1px solid green; 
 
    /*l&f*/ 
 
    border: 1px solid red; 
 
} 
 
.summary { 
 
    display: table-cell; 
 
    /*l&f*/ 
 
    background-color: lightblue; 
 
    white-space: nowrap; 
 
    /* one line */ 
 
    overflow: hidden; 
 
    /* make text overflow */ 
 
    text-overflow: ellipsis; 
 
    /* truncate texT with ... */ 
 
}

<div class="list-table"> 
 
    <a href="#1" class="list-tr"> 
 
    <div class="list-td">Row 1</div> 
 
    <div class="list-td">More stuff</div> 
 
    <div class="list-td"> 
 
     <div class="fixed-table"> 
 
     <div class="summary">Some single line run on text goes here</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#2" class="list-tr"> 
 
    <div class="list-td">Row 2</div> 
 
    <div class="list-td">Other column</div> 
 
    <div class="list-td"> 
 
     <div class="fixed-table"> 
 
     <div class="summary">This is text content that runs on and on and on without end and may need to be truncated somewhere on the summary screen depending on screen size to show only the first part that will fit.</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#3" class="list-tr"> 
 
    <div class="list-td">Row 3</div> 
 
    <div class="list-td">Still other content</div> 
 
    <div class="list-td"> 
 
     <div class="fixed-table"> 
 
     <div class="summary">Here is still more long text that may need truncation in the summary version because it is so long.</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>

Answer 2

.list-table { 
    max-width:100vw; 
} 

Answer 3

Yapabileceğim tek şey, summary sınıfınıza (bir keyfi) max-width eklemek:

.summary { 
    display: block; 
    white-space: nowrap; /* one line */ 
    overflow: hidden; /* make text overflow */ 
    text-overflow: ellipsis; /* truncate tex with ... */ 
    /*l&f*/background-color: lightblue; 
    max-width: 500px; 
} 

olmayan kalıtsal genişlikte bir çeşit Bence işe text-overflow almak Sen .summary vermek gerekir ...