<div class="container"> <div class="first">input</div> <div class="second">Text longer than 50px</div> <div class="third">Text longer than 100px</div> <div class="forth"> Text longer than 100px. </div> </div> <input id="first" type="text"> <div id="width"> </div>
.container { width: 600px; border: 1px solid blue; margin: 0 auto; display: flex; } .container > div { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; box-sizing: border-box; } .first { background: lightblue; flex: none; } .second { min-width: 50px; background: lightyellow; } .third { min-width: 100px; background: lightgreen; } .forth { min-width: 100px; background: lightblue; }
$('#first').on('keydown', function (e, ui) { $('.first').text($(e.target).val()); })