CSS線沒有包裹在桌子內

我在佈局中遇到了white-space: pre-line的問題。當我在div元素中包裝內容時，它工作得很好，但是當我用table替換div時，文本不再包裝。這僅僅是爲了展示案例的一小部分。在原始代碼中，很難替換這個外部表格。下面是代碼：CSS線沒有包裹在桌子內

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

在此先感謝。

來源

2012-09-20 Krzysztof

這種風格添加到您的網頁

table { 
    table-layout: fixed; 

}

樣本： http://jsfiddle.net/UPXzt/10/

來源

2012-09-20 11:23:51 Afshin

試試這個demo

只是增加寬度到div

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

來源

2012-09-20 11:18:09 Champ

我不能添加'寬度「，因爲內容應該隨瀏覽器窗口一起縮放。 – Krzysztof

但是你在px中對你的身體有寬度，那麼表怎麼用瀏覽器窗口來縮放呢？ – Champ

我還編輯了與表格佈局的示例http://jsbin.com/erewix/8/嘗試縮放瀏覽器窗口 – Champ

CSS線沒有包裹在桌子內

回答

相關問題