浮動時基於百分比的最大寬度的問題

在div中，我浮動了一個跨度。在該範圍內，有一個子範圍設置基於百分比的最大寬度（使用百分比，因爲我希望它能夠響應）。浮動時基於百分比的最大寬度的問題

問題

的浮動跨度有我想坐在旁邊它同級跨度。但是，當我使用子百分比max-width百分比時，容器跨度保持全寬（主要包含空白）。

代碼

CSS

.ellipsis-text { 
    ... 
    max-width: 40%; 
    ... 
}

HTML

<!-- Floating span --> 
<span class="pull-left"> 
    <!-- Child span with max-width --> 
    <span class="ellipsis-text"> 
     ellipsis text that should cut off 
    </span> 
</span> 
<span class="pull-left"> 
    second text 
</span>

的jsfiddle：http://jsfiddle.net/robcampo/LJqwW/6/

解決方案

當我使用像素時，它可以工作，但由於這應該是響應式的，百分比會更好。此外，它的工作沒有父跨度浮動，但我需要在我的解決方案。

是否有一個乾淨的方法來確保父跨度不能拉伸100％？

來源

2014-04-25 Rob Campo

你的小提琴在Chrome 34上工作正常。你使用什麼瀏覽器？ – David

我認爲最新的firefox（28.0）不顯示問題症狀。 '第二個文本'放在左邊'省略號文本'。 –

你可否發表問題的呈現？ –

浮動元素與未指定的寬度和高度擴展不亞於它的孩子。在這種情況下，兒童的百分比寬度顯然不起作用。以下是這似乎在響應設計工作的替代解決方案：

<div style="overflow: hidden;"> 
    <span style="float: right;">second text</span> 
    <span style="display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">ellipsis text that should cut off</span> 
</div>

Demo Here

的缺點是，所跨越的順序發生了變化。

來源

2014-04-28 10:22:31

謝謝。好的解決方案這應該在大多數情況下工作。我認爲在我最初的問題中使用百分比的一個大問題是，它使用自己跨度寬度的百分比，而不是其父寬度。 –

是的，如果家長的尺寸依賴於其內容（例如，當它浮動或定位），那麼孩子不能使用百分比寬度;或者至少不是您期望的方式。 –

父跨度應該有顯示屏阻止並浮動到左側，並且它必須手動具有寬度大小來處理兒童寬度大小。孩子跨度應該有顯示屏阻止，浮動到左側，寬度大小爲百分比或px

來源

2014-04-25 18:20:37 scripter

謝謝，但我不想在父跨度上設置寬度。我添加了顯示塊到兩個跨度，並將孩子向左移動，但這並不起作用。 –

比較渲染，可以清楚地看到省略號文本佔用了其父元素的40％。

我認爲您目前正在使用破碎的瀏覽器。

css result 通過Firefox渲染28（注意FF 38不存在）。

<!-- Problem with this row --> 
<div class="row"> 
    <div class="col-md-12"> 
     <span class="pull-left"> 
      <span class="ellipsis-text"> 
       ellipsis text that should cut off 
      </span> 
     </span> 
     <span class="pull-left snd"> 
      second text 
     </span> 
    </div> 
</div>

CSS：

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 
.ellipsis-text { 
    display: inline-block; 
    max-width: 40%; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow-x: hidden; 
    overflow-y: auto; 
    vertical-align: middle; 
} 
.ellipsis-text { 
    background: rgba(0, 255, 255, .25); 
} 
.ellipsis-text-px { 
    max-width: 40px; 
} 
.ellipsis-text-small { 
    max-width: 5%; 
} 
.pull-left { 
    background: rgba(255, 255, 0, .25); 
} 
.pull-left.snd { 
    background: rgba(255, 0, 0, .25); 
}

來源

2014-04-28 10:09:14

謝謝你潛入更深。這是問題，雖然...我不希望父母擴大到100％。我希望父跨度與其子跨度一樣寬。因此，你的照片中的黃色區域是我想要刪除的。應該是FF 28順便說一句。 –

浮動時基於百分比的最大寬度的問題

回答

相關問題