文章/答案/技术大牛

发布

问CSS行未在表格内换行
EN

Stack Overflow用户

提问于 2012-09-20 19:06:26

回答 2查看 1.3K关注 0票数 0

在我的布局中，我遇到了white-space: pre-line的问题。当我将内容包装在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>

工作示例：http://jsfiddle.net/UPXzt/1/

提前谢谢。

css

google-chrome

internet-explorer-9

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-09-20 19:23:51

将此样式添加到您的页面

table {
    table-layout: fixed;

}

示例：http://jsfiddle.net/UPXzt/10/

票数 2

Stack Overflow用户

发布于 2012-09-20 19:18:10

尝试此demo

只需向div添加宽度

.document-preview .content-details-row .content-details-value > div 
{
width: 430px;
white-space: pre-wrap !important;
word-wrap: break-word;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12511344

复制

相似问题

问CSS行未在表格内换行
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS行未在表格内换行EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS行未在表格内换行
EN