I faced the problem with white-space: pre-line in my layout. When I wrap content

Question

0

Asked: June 11, 20262026-06-11T18:42:18+00:00 2026-06-11T18:42:18+00:00

I faced the problem with white-space: pre-line in my layout. When I wrap content

0

I faced the problem with white-space: pre-line in my layout. When I wrap content in a div element it works just fine, but when I replace div with table text is no longer wrapping. This is only small part just to show the case. In original code it would be hard to replace this outer table. Here is the code:

<!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>

Working sample: http://jsfiddle.net/UPXzt/1/

Thanks in advance.