Using text-overflow: ellipsis; on a parent div when the child is an input

Question

I have multiple non-wrapping, inline child elements within a parent div that has a set width and text-overflow set to ellipsis.

When the last child is an anchor tag, the ellipses work fine, but when it's an input, the text just clips. Because the preceding items are variable width, I can't set a reasonable max width on the last input.

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

Any suggestions? Here's a JSFiddle.

Demavend

A jsfiddle or equivalent would be helpful – Stunk

text-overflowis designed to work on text, not input elements. – Incommunicable

Answer 1

Well here is what I came up with. It needs some adjustments to your markup, but other than that it works.

a) The submit input can be safely replaced with a button submit that is also semantic and you can style it to your needs. b) The simple text has to be wrapped within a span

Since you have variable content, the only way to do it is by using table-cells ...wrapped within a table obviously. Using table-layout:fixed would do the trick IF your content was not of variable width. This is why I added a width 33% to all table-cells which is just an indicator of what to be used; table-cells will disregard the set value and still expand accordingly and arbitrarily depending on their content.

Here is the updated markup and a working fiddle: 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%;
}

Working fiddle: http://jsfiddle.net/5muarho3/3/

Antoineantoinetta