如何設置垂直高度以防止浮動跨度溢出？

我有一些文本的浮動跨度。
我已經設置溢出隱藏和寬度固定寬度說100px。
現在當文本變得太長時，它只是包裝。
我不想將高度設置爲固定px，因爲如果我更改字體大小，我可能會忘記更新高度等等。任何想法？如何設置垂直高度以防止浮動跨度溢出？

<span style="float:left;overflow:hidden;width:100px;">Very Long Text</Span>

來源

2012-03-28 Karim

我不確定你會不用指定高度就可以做到這一點。 – Alex 2012-03-28 10:04:48

我沒有指定高度的問題，我只是希望它在相對單位。但不是1em。因爲它搞砸了相對於什麼壽命的線 - 高 – Karim 2012-03-28 10:08:39

？ – Alex 2012-03-28 10:10:01

聽起來像是你可能想嘗試這樣的：

CSS：

.floated-element { 
    float:left; /* Or right, whatever */ 
    width:100px; 
    white-space:no-wrap; /* Keeps the text to one line */ 
    text-overflow:ellipsis; /* This will add ... to the end of text that extends beyond 100px */ 
    overflow:hidden; 
}

HTML：

<div class="floated-element"> 
    ... 
</div>

如果你真的想用一個<span>而不是浮動的<div>，您需要將範圍的display設置爲inline-block。這可讓您指定width，同時保留其他內聯屬性。

來源

2012-03-28 17:01:01 Ryan

我認爲溢出：省略號應該溢出：隱藏;文本溢出：省略號; 。我的意思是它在FF中的工作，當我改變它。 – Karim 2012-03-28 17:13:06

哎呀！你是對的。更新了帖子。 – Ryan 2012-03-28 17:19:34

那麼你需要添加「overflow：hidden;」太。 – Karim 2012-03-28 18:21:55

你不能設置一個width內聯元素。
在塊元素上聲明寬度和overflow:hidden垂直自動展開元素以使文本適合。

有關您試圖達到的目標的更多信息將有助於提供進一步的幫助。

編輯：

的overflow:hidden初始想法是隱藏過多含量（通常一起使用的固定尺寸）。你可能想重新思考，你想做什麼（你真的需要這種溢出？）。

來源

2012-03-28 10:05:20 Christoph

抱歉元素浮動:)我將更新問題 – Karim 2012-03-28 10:06:22

@Karim所以你不需要設置'height'，元素會自動擴展內容可以適應 – Christoph 2012-03-28 10:09:15

和這個我的問題，我只想顯示1行文本和其餘部分，但它只是展開顯示在幾行 – Karim 2012-03-28 10:10:24

我找到了我的問題的解決方案。
我不想將高度設置爲某些變量值，例如line-height的值爲1.4em（因爲它可以隨時間變化，所以我需要查找並替換應用程序中的所有值）。
所以我發現的另一個修復是我可以設置「白色空間：nowrap;」在跨度上。
等待其他答案:)

來源

2012-03-28 16:53:15 Karim

尷尬，我沒有想到這個...： -/ – Christoph 2012-03-29 07:29:00

沒問題。這實際上是具有stackoverflow的優勢之一。我的想法其實是通過在stackoverflow上搜索問題:) – Karim 2012-03-29 16:44:57

如何設置垂直高度以防止浮動跨度溢出？

回答

相關問題