我在布局中遇到了问题white-space: pre-line
。当我将内容包装在一个div
元素中时,它工作得很好,但是当我div
用table
文本替换时不再包装。这只是展示案例的一小部分。在原始代码中,很难替换这个外部表。这是代码:
<!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>
工作样本:http: //jsfiddle.net/UPXzt/1/
提前致谢。