オーバーフローのないテーブルにデータを配置する方法

Question

テーブルセルのテキストが幅より大きい場合、セルがオーバーフローします。 See this picture

私は、セルのtxtブレークに置く幅よりも大きいセル内ときにテキストを、必要white-space: nowrap;Pic

を削除します。

/********************************************* ******************************/

これは私のテーブルコードです：

<div class="main-container-list-news-tabel-container-header"> 
    <div class="main-container-list-news-tabel-container-header-title"> 
     <label>title</label> 
    </div> 
    <div class="main-container-list-news-tabel-container-header-time"> 
     <label>date</label> 
    </div> 
    <div class="main-container-list-news-tabel-container-header-type"> 
     <label>type</label> 
    </div> 
    <div class="main-container-list-news-tabel-container-header-operation"> 
     <label>operation</label> 
    </div> 
</div> 
<div class="main-container-list-news-tabel-container-element"> 
    <div class="main-container-list-news-tabel-container-element-title"> 
     <label>txttitle</label> 
    </div> 
    <div class="main-container-list-news-tabel-container-element-time"> 
     <label>date</label> 
    </div> 
    <div class="main-container-list-news-tabel-container-element-type"> 
     <label>type</label> 
    </div> 
    <div class="main-container-list-news-tabel-container-element-operation"> 
     <label>operation</label> 
    </div> 
</div> 

そして、これ私のCSSれる：

.main-container-list-news-tabel-container-header { 
    width: 100%; 
    height: 50px; 
    background-color:#EDEDED; 
    border-bottom:2px solid #000000; 
    border-top:2px solid #000000; 
    border-right:2px solid #000000; 
    border-left:2px solid #000000; 
} 

.main-container-list-news-tabel-container-header-title { 
    width: 376px; 
    direction: rtl; 
    font-family: 'Iranian Sans'; 
    height: 46px; 
    float: right; 
    text-align:center; 
    border-left: 2px solid #000000; 
} 

.main-container-list-news-tabel-container-header-title label { 
    margin-top: 10px; 
    margin-right: 15px; 
} 

.main-container-list-news-tabel-container-header-time { 
    width: 140px; 
    direction: rtl; 
    font-family: 'Iranian Sans'; 
    height: 46px; 
    float: right; 
    text-align:center; 
    border-left: 2px solid #000000; 
} 

.main-container-list-news-tabel-container-header-time label { 
    margin-top: 10px; 
    margin-right: 15px; 
} 

.main-container-list-news-tabel-container-header-type { 
    width: 140px; 
    direction: rtl; 
    font-family: 'Iranian Sans'; 
    height: 46px; 
    float: right; 
    text-align:center; 
    border-left: 2px solid #000000; 
} 

.main-container-list-news-tabel-container-header-type label { 
    margin-top: 10px; 
    margin-right: 15px; 
} 

.main-container-list-news-tabel-container-header-operation { 
    width: 178px; 
    direction: rtl; 
    font-family: 'Iranian Sans'; 
    height: 46px; 
    text-align:center; 
    float: right; 
} 

.main-container-list-news-tabel-container-header-operation label { 
    margin-top: 10px; 
    margin-right: 15px; 
} 

.main-container-list-news-tabel-container-element{ 
    margin-right:2px; 
} 

/************************************************/ 

.main-container-list-news-tabel-container-element-title { 
    width: 376px; 
    direction: rtl; 
    font-family: 'Iranian Sans'; 
    float: right; 
    border-left: 2px solid #000000; 
    border-bottom:2px solid #000000; 
    word-break:break-all; 
} 

.main-container-list-news-tabel-container-element-title label { 
    margin-top: 10px; 
    margin-right: 15px; 
    white-space: nowrap; 
} 

.main-container-list-news-tabel-container-element-time { 
    width: 140px; 
    direction: rtl; 
    font-family: 'Iranian Sans'; 
    float: right; 
    border-left: 2px solid #000000; 
    border-bottom:2px solid #000000; 
} 

.main-container-list-news-tabel-container-element-time label { 
    margin-top: 10px; 
    margin-right: 15px; 
} 

.main-container-list-news-tabel-container-element-type { 
    width: 140px; 
    direction: rtl; 
    font-family: 'Iranian Sans'; 
    float: right; 
    border-left: 2px solid #000000; 
    border-bottom:2px solid #000000; 
} 

.main-container-list-news-tabel-container-element-type label { 
    margin-top: 10px; 
    margin-right: 15px; 
} 

.main-container-list-news-tabel-container-element-operation { 
    width: 178px; 
    direction: rtl; 
    font-family: 'Iranian Sans'; 
    float: right; 
    border-bottom:2px solid #000000; 
} 

.main-container-list-news-tabel-container-element-operation label { 
    margin-top: 10px; 
    margin-right: 15px; 
} 

.main-container-list-news-tabel-container-element{ 
    margin-right:2px; 
} 

Answer 1

は、あなたのコードはdoesnの

.main-container-list-news-tabel-container-header>div,.main-container-list-news-tabel-container-element>div{ 
    word-wrap: break-word; 
    word-break: break-all; 
}