CSS行未在表内换行
我在布局中遇到了CSS行未在表内换行,css,google-chrome,internet-explorer-9,Css,Google Chrome,Internet Explorer 9,我在布局中遇到了空白:行前的问题。当我在div元素中包装内容时,它工作得很好,但当我用table替换div时,文本不再包装。这只是一小部分,只是为了说明情况。在原始代码中,很难替换这个外部表。代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="te
空白:行前
的问题。当我在div
元素中包装内容时,它工作得很好,但当我用table
替换div
时,文本不再包装。这只是一小部分,只是为了说明情况。在原始代码中,很难替换这个外部表。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
border: 1px dashed red;
font-size: 12px;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
margin: 0 auto !important;
padding: 10px;
width: 600px;
}
.document-preview {
border-spacing: 0;
width: 100%;
}
.document-preview .content-details-row {
padding: 0 2px 0 162px;
position: relative;
white-space: nowrap;
z-index: 1;
}
.document-preview .content-details-row span:first-child {
display: block;
float: left;
margin: 0 2px 0 -160px;
overflow: hidden;
width: 160px;
z-index: 2;
}
.document-preview .content-details-row span:first-child:after {
content: "..............................................................................";
font-weight: lighter;
font-size: 10px;
letter-spacing: 2px;
}
.document-preview .content-details-row .content-details-value {
display: inline-block;
width: 100%;
z-index: 2;
}
.document-preview .content-details-row .content-details-value > div {
white-space: pre-line;
word-wrap: break-word;
}
</style>
</head>
<body>
<table class="document-preview"><tbody><tr><td>
<div class="content-details-row">
<span>Label:</span>
<span class="content-details-value">
<div>Doesn't work: Something something AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
</span>
</div>
</td></tr></tbody></table>
<hr />
<div class="document-preview">
<div class="content-details-row">
<span>Label:</span>
<span class="content-details-value">
<div>Works: Something something AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
</span>
</div>
</div>
</body>
</html>
身体{
边框:1px红色虚线;
字体大小:12px;
字体系列:“投石机MS”,Verdana,Helvetica,无衬线;
保证金:0自动!重要;
填充:10px;
宽度:600px;
}
.文件预览{
边界间距:0;
宽度:100%;
}
.文档预览.内容详细信息行{
填充:0 2px 0 162px;
位置:相对位置;
空白:nowrap;
z指数:1;
}
.文档预览.内容详细信息行范围:第一个子项{
显示:块;
浮动:左;
利润率:0.2px 0-160px;
溢出:隐藏;
宽度:160px;
z指数:2;
}
.文档预览.内容详细信息行范围:第一个子项:之后{
内容:“…………”;
字体重量:较轻;
字体大小:10px;
字母间距:2px;
}
.文档预览.内容详细信息行.内容详细信息值{
显示:内联块;
宽度:100%;
z指数:2;
}
.文档预览.内容详细信息行.内容详细信息值>div{
空白:行前;
单词包装:打断单词;
}
标签:
不起作用的东西aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
标签:
工作原理:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
工作样本:
提前谢谢。试试这个
只需将宽度添加到div
.document-preview .content-details-row .content-details-value > div
{
width: 430px;
white-space: pre-wrap !important;
word-wrap: break-word;
}
将此样式添加到页面
table {
table-layout: fixed;
}
样本:
我无法添加
宽度
,因为内容应该随浏览器窗口缩放。但是你的身体在px中有宽度,那么为什么表格会随浏览器窗口缩放?我还编辑了表格布局,请参见演示尝试缩放浏览器窗口这是显示问题的示例。正如我写的,这只是布局的一部分。