如何在沒有溢出的情況下將數據放入表格

Question

當表格單元格中的文本大於寬度時，會溢出單元格。 See this picture

我刪除white-space: nowrap;Pic

我需要在文本在單元格大於寬度，穿上細胞TXT中斷。

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

這是我的表碼：

<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

添加到您的CSS

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