有谁知道如何更改行高和宽度,甚至在css / html中打破一个新行?
我连续都有一些长句,它们相互重叠而不是换成新的一行?这使文本不可读。请看问题的截图。
我还尝试将最小宽度值设置为<td>
和<tr>
页面元素。
但没有效果。我还将表格设置为宽度100%;但桌子不会一直延伸到整个屏幕上。
我希望它看起来像这样......句子在下面继续:
相反......它做到了......
正如您所看到的,我甚至无法读取表中的文本,因为单元格正在将文本推送到一起。我希望细胞伸展以适应文本。
我已经更改了其中一个单元格的宽度,但文本仍然不会继续到另一行。它似乎只是挤在一个牢房里。
的CSS:
table {
width: 100%;
height: 30%;
border: 1px solid #ffffff;
border-spacing: 0;
border-collapse: collapse;
background-color: #ffffff;
}
tr:nth-child(even) {
background: #ffffff;
height:20%;
}
tfoot {
background: #e9e9e9;
font-weight: bold;
}
th {
text-transform: uppercase;
border-right: 1px solid #fff;
background: #ffffff;
border-bottom: 2px #fff solid;
color:#fff;
}
td, caption {
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
tr.even td {
background: #ffffff;
}
th, td, caption {
padding: 10px;
}
:before, :after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before, .clearfix:after, .container:before, .container:after {
display: table;
content: " ";
}
.table-style2 th {
border-right-color: #fff;
border-bottom-color: #fff;
}
HTML:
<table border='1'>
<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
<th>Location</th>
<th>Category</th>
</tr><tr><td style='height:10px; width:10px;'>1</td><td>example</td><td style='height:10px; width:100%;'>example text</td> <td>example city</td><td>example category</td> </tr>
<tr><td style='height:10px; width:10px;'>2</td><td>Banker</td><td style='height:10px; width:100%;'>Banking for clients</td> <td>Harrogate</td><td>banker</td> </tr>
<tr><td style='height:10px; width:10px;'>3</td><td>front end web developer</td><td style='height:10px; width:100%;'>front end web developer, create and maintain amazing websites. html5, css3, javascript skills needed.</td> <td>York</td><td>IT</td> </tr>
<tr><td style='height:10px; width:10px;'>4</td><td>front end web developer</td><td style='height:10px; width:100%;'>front end web developer, create and maintain amazing websites. html5, css3, javascript skills needed.</td> <td>harrogate</td><td>IT</td> </tr>
<tr><td style='height:10px; width:10px;'>5</td><td>Waiting Staff </td><td style='height:10px; width:100%;'>A history of table service is suitable but not essential as we provide thorough and comprehensive training on-site to provide our staff with the skills to excel. We’d like outgoing people motivated to wow our guests and who share our passion for outstanding service. Having been rated by our own staff in the Sunday Times 100 Best Companies surveys as one of the nation’s top hundred employers guarantees you that this will be a job like no other. We are currently the No.1 employer for having fu</td> <td>newcastle upon tyne</td><td>catering</td> </tr>
</table>
答案 0 :(得分:0)
只需为包含文本的元素设置宽度,句子就会自动中断。
答案 1 :(得分:0)
word-break: break-all;
在你的CSS中,当它达到容器的极限时会强制该行中断。这看起来像你想要的。
获取您要输出的字符串并将其剪切为可管理的大小,该字符串会拉伸您的布局,让我们称之为$longString
- 您可以缩小到合理的大小,然后显示:
if ($longString[42] !== false){
$shorterString = substring($longString,0,42);
$shorterString .= "...";
}
else {
$shorterString = $longString;
}
这会将长字符串缩减为较短的42个字符,并在末尾添加...
。见Get first n characters of a string。此外,我对字符串中的第42个元素(第43个字符)使用了真/假测试,而不是获得str_length()
响应,因为它的效率稍高一些。
如果字符串长度不是43个字符,则完整字符串将不加改变地输出。
PHP答案无法解决基本的CSS布局问题
答案 2 :(得分:0)
我设法使用
设置其中一个单元格的宽度 echo "<td min-width:'700'>". $row["job_description"] . "</td> " ;
但是文本仍然相互重叠。文字不会继续到下一行。