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

我在一个父div中有多个非换行、内联子元素，该父div的

宽度和
文本溢出设置为
省略号

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



.parent{
宽度：120px；
背景：#eee；
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}

文本
文本
这是我的想法。它需要对标记进行一些调整，但除此之外，它还能工作

a） submit输入可以安全地替换为按钮submit，按钮submit也是语义的，您可以根据需要设置样式。
b） 简单文本必须包装在
span

因为您有可变的内容，所以唯一的方法是使用
表格单元格
…包装在
表格
中。如果您的内容不是可变宽度的，那么使用
表格布局：fixed
就可以了。这就是为什么我在所有表格单元格中添加了33%的宽度，这只是一个要使用的指示器；表格单元格将忽略设置值，并根据其内容进行相应的任意扩展

以下是更新后的标记和一把工作小提琴：
HTML:

工作提琴：
jsfiddle或同等工具会很有用
文本溢出
设计用于处理文本，而不是输入元素。
<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>

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