css - Force 2 elements on the same line, always -
i have table has following contents:
created this:
<div class="currency">1,280.00</div> div.currency { text-align: right; width: 100%; } div.currency:before { content: "$"; float: left; } problem when table cell not wide enough overflow dollar symbol next line. not clear in example $ sign align left , decimal value right (accounting style in excel).
is there way force them on same line , have resize table cell, long strings?
you can use flexbox on , default, flex row set nowrap won't wrap. use justify-content: space-between separate elements instead of using text-align , float
div.currency { width: 50px; background: #ccc; display: flex; justify-content: space-between; } div.currency:before { content: "$"; } <div class="currency">1,280.00</div> 
Comments
Post a Comment