当表格单元格中的文本大于宽度时,会溢出单元格。 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;
}
你的代码没有按甚至不能证明问题。没有任何东西溢出它的父元素。请尝试始终提供[最小,完整和可验证的示例](http://stackoverflow.com/help/mcve)。 – Steve