calc-rounding-002.html (1307B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1881220"> 4 <link rel="help" href="https://drafts.csswg.org/css-values/#funcdef-calc"> 5 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 6 <link rel="author" href="https://mozilla.org" title="Mozilla"> 7 <link rel="match" href="calc-rounding-002-ref.html"> 8 <style> 9 * { 10 box-sizing: border-box; 11 } 12 :root { 13 font-family: sans-serif; 14 } 15 .parent { 16 display: inline-flex; 17 --addon-size: 1rem; 18 } 19 .child { 20 min-width: 0; 21 display: inline-flex; 22 max-width: calc(100% - var(--addon-size)); 23 } 24 .overflow { 25 overflow: hidden; 26 text-overflow: ellipsis; 27 white-space: nowrap; 28 } 29 .addon-child { 30 display: inline-flex; 31 width: var(--addon-size); 32 } 33 span { 34 outline: 1px dashed red; 35 outline-offset: -1px; 36 } 37 p > span > span { 38 padding: .5rem .25rem; 39 } 40 </style> 41 <p><span class="parent"><span class="child"><span class="overflow">iiiiiiiiiiiii</span></span><span class="addon-child"></span></span></p> 42 <p><span class="parent"><span class="child"><span class="overflow">iiiiiiiiiiiiii</span></span><span class="addon-child"></span></span></p> 43 <p><span class="parent"><span class="child"><span class="overflow">iiiiiiiiiiiiiii</span></span><span class="addon-child"></span></span></p>