截斷溢出的文本，所以表不走比屏幕

更寬我想顯示在表格形式的各種項目（每個入口都有不同的屬性）。下面還需要：截斷溢出的文本，所以表不走比屏幕

列應是動態的，以便緊密地貼合的內容，沒有固定的寬度（由表格佈局處理）
行可點擊來激活該行的條目，例如一個動作使用該內容的擴展版本顯示新頁面（按照示例代碼，使用CSS display: table/table-row/table-cell而不是<table>/<tr>/<td>進行處理）。（對我來說另一個原因是我使用JSF，它生成的HTML，但有點讓我堅持使用這個。）
我無法得到這個權利：表不應該增長超出屏幕寬度if可能。特別是，「摘要」列顯示（可能長的）文本，在必要時將被截斷，所以文本適合單元格，該單元格適合於表格寬度，該寬度可能不比屏幕寬度寬。
- 我使用本摘要的CSS text-overflow: ellipsis以及其他所需的設置。由於周邊<div>已經display: table-cell，而ellipsis屬性needs an inline/block element，在「摘要」文本被包裹在另一個<div>。

這裏的所需效果的例子（注意在底部沒有滾動條）：

雖然這是我目前能夠實現（不理想 ）（在底注滾動條 - 這表明臺運行了右側窗口）：

這裏是準系統代碼來實現這一點（一個可以省略標有/*l&f*/（外觀），他們只是爲了產生一個更清潔的外觀，更容易調試例如，所有的屬性）。

CSS和HTML：

A { 
 
    /*l&f*/text-decoration: inherit; 
 
    /*l&f*/color: inherit; 
 
} 
 
.list-table { 
 
    display: table; 
 
    /*l&f*/border: 1px solid blue; 
 
    /*l&f*/border-spacing: 5px; 
 
} 
 
.list-tr { 
 
    display: table-row; 
 
    /*l&f*/background-color: lightgray; 
 
} 
 
.list-td { 
 
    display: table-cell; 
 
    white-space: nowrap; /* one line */ 
 
    /*l&f*/padding: 2px; border : 1px solid green; 
 
    /*l&f*/border: 1px solid red; 
 
} 
 
.summary { 
 
    display: block; 
 
    white-space: nowrap; /* one line */ 
 
    overflow: hidden; /* make text overflow */ 
 
    text-overflow: ellipsis; /* truncate tex with ... */ 
 
    /*l&f*/background-color: lightblue; 
 
}

<div class="list-table"> 
 
    <a href="#1" class="list-tr"> 
 
    <div class="list-td">Row 1</div> 
 
    <div class="list-td">More stuff</div> 
 
    <div class="list-td"> 
 
     <div class="summary">Some single line run on text goes here</div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#2" class="list-tr"> 
 
    <div class="list-td">Row 2</div> 
 
    <div class="list-td">Other column</div> 
 
    <div class="list-td"> 
 
     <div class="summary">This is text content that runs on and on 
 
     and on without end and may need to be truncated somewhere on the 
 
     summary screen depending on screen size to show only the first part 
 
     that will fit.</div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#3" class="list-tr"> 
 
    <div class="list-td">Row 3</div> 
 
    <div class="list-td">Still other content</div> 
 
    <div class="list-td"> 
 
     <div class="summary">Here is still more long text that may 
 
     need truncation in the summary version because it is so long.</div> 
 
    </div> 
 
    </a> 
 
</div>

我已經能夠實現與display: -moz-box（以及各種其他-moz-設置）所期望的結果，在summary風格。不開心，因爲這不是跨平臺的。

你有什麼更好的建議？您的幫助非常感謝:-)

來源

2016-01-21 fr13d

您可以使用[其他箱花式（https：//開頭的CSS-技巧.com/using-flexbox /）以及mox-box來獲得你的跨瀏覽器兼容性 – Aravona

@Aravona，在這種情況下它似乎很危險，因爲其他瀏覽器的「實驗性」功能完全不符合**，也具有被'flex'取代，這又是不同的......然而，看看'flexbox'是否給人帶來了任何快樂，但目前還不熟悉它。 – fr13d

這主要是因爲你已經在嘗試moz-box，這只是瀏覽器兼容性的第一次打擊。有可能更多 - 只是谷歌:) – Aravona

如果您可以對導出的HTML進行更改，那麼您在這裏有一個可能的解決方案。

我做了一些更改您的HTML（加父div來.summary，通過使用table-layout:fixed創建一個固定的表）

見以下代碼片段：

A { 
 
    /*l&f*/ 
 
    text-decoration: inherit; 
 
    /*l&f*/ 
 
    color: inherit; 
 
} 
 
.list-table { 
 
    display: table; 
 
    /*l&f*/ 
 
    border: 1px solid blue; 
 
    /*l&f*/ 
 
    border-spacing: 5px; 
 
    width: 100%; /* ADDED */ 
 
} 
 
/* CREATED */ 
 
.fixed-table { 
 
    width:100%; 
 
    table-layout: fixed; 
 
    display:table 
 
} 
 

 
.list-tr { 
 
    display: table-row; 
 
    /*l&f*/ 
 
    background-color: lightgray; 
 
} 
 
.list-td { 
 
    display: table-cell; /* CHANGED */ 
 
    white-space: nowrap; 
 
    /* one line */ 
 
    /*l&f*/ 
 
    padding: 2px; 
 
    border: 1px solid green; 
 
    /*l&f*/ 
 
    border: 1px solid red; 
 
} 
 
.summary { 
 
    display: table-cell; 
 
    /*l&f*/ 
 
    background-color: lightblue; 
 
    white-space: nowrap; 
 
    /* one line */ 
 
    overflow: hidden; 
 
    /* make text overflow */ 
 
    text-overflow: ellipsis; 
 
    /* truncate texT with ... */ 
 
}

<div class="list-table"> 
 
    <a href="#1" class="list-tr"> 
 
    <div class="list-td">Row 1</div> 
 
    <div class="list-td">More stuff</div> 
 
    <div class="list-td"> 
 
     <div class="fixed-table"> 
 
     <div class="summary">Some single line run on text goes here</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#2" class="list-tr"> 
 
    <div class="list-td">Row 2</div> 
 
    <div class="list-td">Other column</div> 
 
    <div class="list-td"> 
 
     <div class="fixed-table"> 
 
     <div class="summary">This is text content that runs on and on and on without end and may need to be truncated somewhere on the summary screen depending on screen size to show only the first part that will fit.</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#3" class="list-tr"> 
 
    <div class="list-td">Row 3</div> 
 
    <div class="list-td">Still other content</div> 
 
    <div class="list-td"> 
 
     <div class="fixed-table"> 
 
     <div class="summary">Here is still more long text that may need truncation in the summary version because it is so long.</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>

來源

2016-01-21 11:37:25 dippas

謝謝，有用的知道:-)剛剛在IE11，Opera34，Firefox41，Chrome47測試（似乎我需要更新...）。如果其他人需要做類似的調整，可以進一步調整：** fixed-table **中的'border-collapse：collapse'，以便摺疊邊界:-)，'min-width：'*可以接受的東西，例如。 4em *在**摘要**中，以防止該欄完全在非常狹窄的屏幕上摺疊（在這種情況下將允許滾動到右側，這是OK）。 – fr13d

很高興幫助你:) – dippas

.list-table { 
    max-width:100vw; 
}

來源

2016-01-21 10:49:05

似乎'最大寬度：100vw'（或'100％'）仍然增長視圖面積大於屏幕如果內容保證。至少在Firefox上，稍後會測試其他人。 – fr13d

關於我所能做的只是添加（任意）max-width到您的summary類：

.summary { 
    display: block; 
    white-space: nowrap; /* one line */ 
    overflow: hidden; /* make text overflow */ 
    text-overflow: ellipsis; /* truncate tex with ... */ 
    /*l&f*/background-color: lightblue; 
    max-width: 500px; 
}

你需要給.summary某種非繼承的寬度得到text-overflow工作，我想......

來源

2016-01-21 11:42:44

截斷溢出的文本，所以表不走比屏幕

回答

相關問題