Using text overflow: ellipsis; in the parent div when the child is an input

Question

I have several non-integrating, built-in children in a parent div that have a set of width and text-overflow set to ellipsis .

When the last child is an anchor tag, the ellipses work fine, but when it is entered, the text just pinches. Since the previous elements have a variable width, I cannot set a reasonable maximum 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 the JSFiddle .

Answer 1

Well, that’s what I came up with. It needs some settings for your markup, but other than that it works.

a) Input can be safely replaced with the submit button, which is also semantic, and you can customize it to fit your needs. b) Plain text should be wrapped inside the span

Since you have variable content, the only way to do this is to use table-cells ... wrapped in table , obviously. Using table-layout:fixed will do the trick if your content doesn't have a variable width. This is why I added a width of 33% for all table cells, which is just an indicator of what to use; table-cells ignore the set value and still expand accordingly and arbitrarily depend on their contents.

Here is the updated markup and 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 script: http://jsfiddle.net/5muarho3/3/