如何强制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元素成一行？

回答

相关问题