使用文本溢出:省略号; 当孩子是输入时,在父div上

Question

我在父div中有多个非换行的内联子元素,它们有一个set 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.

Answer 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/