如何強制HTML元素成一行？

-2

<div> 
    <div style="overflow: hidden; white-space: nowrap; text-overflow:ellipsis"> 
Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt 
    <div style="float: right">Float text</div> 
    </div>

這將顯示類似：

Texttttttttttttttttttttttttttttttttttttttttttt... 
             Float text

不過，我希望它是這樣的：

Texttttttttttttttttttttttttttttttttttt...Float text

我嘗試使用絕對位置方法，但通過這種方式，省略號將不會顯示。

有什麼辦法可以做到這一點？

注意：

不知道什麼是錯的，但很多人的直列塊或跨度方式建議，既不能正常工作。在'Textttt'之前放置浮動文本的工作。

來源

2016-03-21 dspjm

把右浮動塊，你希望它是符合文本之前。

<div style="overflow: hidden; white-space: nowrap; text-overflow:ellipsis"> 
    <div style="float: right">Float text</div> 
    Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt 
</div>

https://jsfiddle.net/pkfwnan7/

來源

2016-03-21 14:40:52 Blazemonger

這真是太棒了，它確實有效，但我不知道爲什麼。 – dspjm

使用顯示：inline-block的使DIV內嵌

<div> 
    <div style="overflow: hidden; white-space: nowrap; text-overflow:ellipsis"> 
Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt 
    <div style="display:inline-block">Float text</div> 
    </div>

來源

2016-03-21 14:35:32 Jim

嘗試跨度類

<span> 
<div style="overflow: hidden; white-space: nowrap; text-overflow:ellipsis> 
</div> 
</span> 
<span> 
<div style="float: right>Float text</div> 
</div> 
</span>

來源

2016-03-21 14:35:49

內包裝都更新

對於任何一個在下面的解決方案來在左邊的文本上有省略號，它需要一個寬度集，要麼是明確的，要麼是由於空間不足而產生的，並且具有overflow: hidden/text-overflow: ellipsis。

你不喜歡這個，這裏外層div（wrap）具有white-space: nowrap和內部顯示器如內嵌塊

.wrap { 
 
    white-space: nowrap; 
 
    max-width: 400px; 
 
} 
 
.wrap > * { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.wrap > div:first-child { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    max-width: 100%; 
 
}

<div class="wrap"> 
 
    <div> 
 
    Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt 
 
    text text text text text text text text text text text text 
 
    </div> 
 
    <div>Float text</div> 
 
</div>

或用display: table

.wrap { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 500px; 
 
} 
 
.wrap > * { 
 
    display: table-cell; 
 
} 
 

 
.wrap > div:first-child div { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="wrap"> 
 
    <div> 
 
    <div>Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</div> 
 
    </div> 
 
    <div>Float text</div> 
 
</div>

來源

2016-03-21 14:36:21 LGSon

使用範圍，而不是

<span>Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</span> 
<span>Float text</span>

的div元素

還要確保父元素沒有固定的寬度

或者設置display: inline-block;。但是這不會是一個問題，因爲你的使用white-space: nowrap;

來源

2016-03-21 14:36:57

將文本放在一個範圍內。無需添加到CSS。

<span>Text Here</span>

來源

2016-03-21 14:37:51

發佈的答案是有些正確的，但你甚至可以簡化您的標記：

<div style="white-space: nowrap;"> 
    Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt Float text 
</div>

Fiddle

時，使用空白屬性描述元素中的空白是怎麼處理。

NOWRAP 崩塌空白爲正常，但抑制文本中的換行符（文本換行）。

MDN on white-space

來源

2016-03-21 14:38:52 Lukas

同時保留'浮法text'這一點，不會做想要的OP，因爲'Texttttt ...'不能有省略號縮短辦法。 – DarkDust

啊，似乎我沒有仔細閱讀。我的錯！ – Lukas

兩個元件上進行顯示：直列嵌段性。你有幾個引號和一個關閉的div標籤丟失。所有這些都已經修復，並且可以在此JSFiddle中看到。

更新的HTML低於：

<div> 
    <div style="overflow: hidden; white-space: nowrap; text-overflow:ellipsis;display:inline-block"> 
     Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt 
    </div> 
    <div style="float: right;display:inline-block"> 
     Float text 
    </div> 
</div>

來源

2016-03-21 14:39:14 Adam0410

-2

嘗試引導

<div class="row"> 
    <div class="col-md-8">Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</div> 
    <div class="col-md-4">Float text</div> 
    </div>

來源

2016-03-21 14:44:38

添加重量級庫來解決這樣的簡單問題是一個不容否認的問題。 – DarkDust

如何強制HTML元素成一行？

回答

相關問題