與非截斷元素並排截取元素

Question

我有一個容器，它包含兩部分文本：可變長度部分和靜態部分。

我希望可變長度部分被截斷（a-la text-overflow: ellipsis），以便容器始終保持在一條線上。

下面是一個圖片來說明：

---

現在，我知道我可以很簡單地display: flex在容器上解決它像這樣：

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    display: flex; 
 
} 
 

 
.variable { 
 
    margin: 0; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.static { 
 
    padding: 0 5px; 
 
    white-space: nowrap; 
 
}

<span class="container"> 
 
    <span class="variable">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum dolorum repudiandae in, delectus similique quos natus facilis non odit laudantium unde nostrum aperiam doloremque magni cum ipsum recusandae repellat iusto quo architecto. Ea reiciendis, natus at fuga officiis, cupiditate voluptatem in, sed quae vero est nesciunt quidem tempora, dignissimos sapiente cumque eveniet. Eaque, fugiat voluptates mollitia veniam, blanditiis aut deleniti. Nesciunt sapiente vitae aut, fugit in commodi neque hic reiciendis, et cupiditate possimus, quod quaerat ducimus ea cumque nihil praesentium. Nesciunt velit magni asperiores optio quam, provident eum earum? Illo et illum, autem ratione! Perferendis non facere, ratione quas beatae?</span> 
 
    <span class="static">| Static Text</span> 
 
</span>

但是，我需要IE8支持或更高。所以，flexbox是絕對的。

我已經試過

• display: table和display: table-cell，但這並不具有可變長度的發揮不錯。我發現的唯一解決方案是設置可變長度文本的寬度，這是不可接受的。
• 玩浮游物，但即使在那裏，沒有設置任何文本容器的寬度，我無法得到上面指定的行爲。

有沒有人有其他想法？我想避免「我假設靜態部分需要〜25％，所以我會給75％的可變寬度」。

Answer 1

這裏是一個嵌套CSS表的解決方案，關鍵是將內表設置爲table-layout:fixed;，它是CSS ellipsis所必需的。

jsFiddle

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.variable, 
 
.static { 
 
    display: table-cell; 
 
    white-space: nowrap; 
 
} 
 

 
.variable { 
 
    width: 100%; 
 
} 
 

 
.static { 
 
    padding: 0 5px; 
 
} 
 

 
.variable-table { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 

 
.variable-cell { 
 
    display: table-cell; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
}

<span class="container"> 
 
    <span class="variable"> 
 
    <span class="variable-table"> 
 
     <span class="variable-cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum dolorum repudiandae in, delectus similique quos natus facilis non odit laudantium unde nostrum aperiam doloremque magni cum ipsum recusandae repellat iusto quo architecto. Ea reiciendis, natus at fuga officiis, cupiditate voluptatem in, sed quae vero est nesciunt quidem tempora, dignissimos sapiente cumque eveniet. Eaque, fugiat voluptates mollitia veniam, blanditiis aut deleniti. Nesciunt sapiente vitae aut, fugit in commodi neque hic reiciendis, et cupiditate possimus, quod quaerat ducimus ea cumque nihil praesentium. Nesciunt velit magni asperiores optio quam, provident eum earum? Illo et illum, autem ratione! Perferendis non facere, ratione quas beatae? 
 
     </span> 
 
    </span> 
 
    </span> 
 
<span class="static">| Static Text</span> 
 
</span>

Answer 2

你沒有提到如果跨度必須爲每個用戶或不是動態的，所以我的解決方案將包括一個小JS給你的能力以硬編碼寬度。這個想法是，你可以說好，我只想要變量文本是x個字符，所以讓我們設置它，讓JS處理其餘的。

var query = document.querySelectorAll('span.variable'); //Query to grab any spans with this name. 
 

 
//Only run if there are elements(s) 
 
if (query.length > 0) { 
 
\t var variableLabel = query[0]; //For now assuming there's one, but this could be looped instead. 
 
\t var maxLength = 45; //Max length to allow, can be modified. 
 
    variableLabel.innerText = variableLabel.innerText.substring(0,maxLength) + "..." //Set the text, with eplipsis. 
 
}

<span class="container"> 
 
    <span class="variable" width="25%">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum dolorum repudiandae in, delectus similique quos natus facilis non odit laudantium unde nostrum aperiam doloremque magni cum ipsum recusandae repellat iusto quo architecto. Ea reiciendis, natus at fuga officiis, cupiditate voluptatem in, sed quae vero est nesciunt quidem tempora, dignissimos sapiente cumque eveniet. Eaque, fugiat voluptates mollitia veniam, blanditiis aut deleniti. Nesciunt sapiente vitae aut, fugit in commodi neque hic reiciendis, et cupiditate possimus, quod quaerat ducimus ea cumque nihil praesentium. Nesciunt velit magni asperiores optio quam, provident eum earum? Illo et illum, autem ratione! Perferendis non facere, ratione quas beatae?</span> 
 
    <span class="static">| Static Text</span> 
 
</span>