Question

我有一些元素，如：

    <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'之前可以正常工作。

Answer 1

将右浮动的块放在您希望它与之对齐的文本之前。

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

https://jsfiddle.net/pkfwnan7/

Answer 2

更新

对于以下任一解决方案，左侧文字都有省略号，它需要一个宽度设置，无论是显式还是空间不足，都有overflow: hidden / text-overflow: ellipsis。

你喜欢这样，外部div（wrap）有white-space: nowrap，内部显示如内联块

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

或display: table

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

使用 display：inline-block 制作div inline

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

Answer 4

使用span代替

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

或者在div元素

上设置display: inline-block;

还要确保父元素没有固定宽度。但是，由于您使用white-space: nowrap;

，这不会成为问题

Answer 5

将文字放在一个范围内。无需添加到CSS。

<span>Text Here</span>

Answer 6

尝试将所有内容包装在span类

中

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

Answer 7

发布的答案有些正确，但您甚至可以简化标记：

DoctrineOrmMappingsPass::createXmlMappingDriver

Fiddle

white-space属性用于描述如何处理元素内的空白。


<强> NOWRAP     像正常一样折叠空格，但是抑制文本中的换行符（文本换行）。

MDN on white-space

Answer 8

给两个元素一个显示：inline-block属性。你有几个引号和一个结束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>

如何强制html元素成一行？

8 个答案: