html - align span size as per content -
i've below html , css
here span content overlapping para content, there way, can data not overlapping para content, ok if san content displayed in 2 lines.
.chapter { margin-left: 5.0em; margin-right: 0.2em; } .para { text-indent: 0em; margin-top: 0.85em; } .para span.phrase { text-indent: 0em; margin-left: -4.75em; font-weight: bold; padding-right: 2.8em; position:absolute; }
<div class="chapter"> <div class="para"> <span class="phrase">8.04</span>the padding shorthand property sets padding properties in 1 declaration. property can have 1 4 values</div> <div class="para"><span class="phrase">25.101-25.102</span> padding shorthand property sets padding properties in 1 declaration. property can have 1 4 values</div> <div class="para"><span class="phrase">8aa.01</span>the padding shorthand property sets padding properties in 1 declaration. property can have 1 4 values</div> </div>
specify width phrase , break word next line using word-break: break-all
.chapter { margin-left: 5.0em; margin-right: 0.2em; } .para { text-indent: 0em; margin-top: 0.85em; } .para span.phrase { text-indent: 0em; margin-left: -4.75em; font-weight: bold; padding-right: 2.8em; position:absolute; width: 70px; word-break: break-all; }
<div class="chapter"> <div class="para"> <span class="phrase">8.04</span>the padding shorthand property sets padding properties in 1 declaration. property can have 1 4 values</div> <div class="para"><span class="phrase">25.101-25.102</span> padding shorthand property sets padding properties in 1 declaration. property can have 1 4 values</div> <div class="para"><span class="phrase">8aa.01</span>the padding shorthand property sets padding properties in 1 declaration. property can have 1 4 values</div> </div>
Comments
Post a Comment