使用文本溢出：省略号；当孩子是输入时，在父 div 上答案

【问题标题】：Using text-overflow: ellipsis; on a parent div when the child is an input使用文本溢出：省略号；当孩子是输入时，在父 div 上
【发布时间】：2016-02-12 00:50:51
【问题描述】：

我在一个父 div 中有多个非包装的内联子元素，其中一组 width 和 text-overflow 设置为 ellipsis。

当最后一个孩子是锚标记时，省略号可以正常工作，但是当它是输入时，文本只是剪辑。因为前面的项目是可变宽度的，所以我无法在最后一个输入上设置一个合理的最大宽度。

.parent {
    width: 120px;
    background: #eee;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

<div class="parent">
  <span class="child1">
    <a href="#">link 1</a> text
    <a href="#">Lorem ipsum dolor</a>
  </span>
</div>
<div class="parent">
  <span class="child1">
    <a href="#">link 2</a> text
    <input type="submit" class="request-topic-link" value="lorem-ipsum-dolor">               
  </span>
</div>

有什么建议吗？这是JSFiddle。

【问题讨论】：

一个 jsfiddle 或等效的会有所帮助
text-overflow 设计用于处理文本，而不是输入元素。

标签： html css overflow ellipsis

【解决方案1】：

这就是我想出的。它需要对您的标记进行一些调整，但除此之外它还有效。

a) 提交输入 可以安全地替换为同样具有语义的按钮提交，您可以根据需要对其进行样式设置。 b) 简单文本必须包含在 span

中

由于您的内容可变，唯一的方法是使用 table-cells ...显然包裹在 table 中。如果您的内容不是可变宽度，则使用table-layout:fixed 可以解决问题。这就是为什么我为所有表格单元格添加了 33% 的宽度，这只是要使用什么的指标；表格单元格将忽略设置值，仍然会根据其内容进行相应的任意扩展。

这里是更新的标记和一个工作小提琴： HTML：

<div class="parent">
  <span class="child1">
    <a href="#">link 1</a> text <a href="#">Lorem ipsum dolor</a>               </span>
</div>
<div class="parent">
  <span class="child1">
  <a href="#">link 1</a><span> textdfgg </span>
  <button type="submit" class="request-topic-link">lorem-ipsum-dolor</button>
  </span>
</div>

CSS：

.parent {
  width: 120px;
  background: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.child1 {
  display: table;
  width: 100%;
}

.child1 > * {
  display: table-cell;
  width: 33%;
}

button {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  width: 100%;
}

工作小提琴：http://jsfiddle.net/5muarho3/3/

【讨论】：