html - How can I absolutely position a block of multi-line text relative to the bottom of the last line? -
i'm struggling problem seems should solvable using css - it's conceptually simple , i'd assume relatively common problem, how achieve eluding me @ moment!
i have container spanning 100% width , 100% height, , need absolutely position block of text have variable number of lines bottom of bottom line of text block @ fixed vertical position in container. can seem position relative top of text, no overflows out of container when there more lines.
here jsfiddle of failed attempt @ positioning relative top of text.
css:
html, body, l-container { width:100%; height:100%; } .l-container { overflow: hidden; width: 100%; height: 100%; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .caption { position: relative; width: 360px; margin-left: -180px; left: 50%; top: 82%; text-align: center; }
html:
<body> <div class="l-container"> <div class="caption">multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multilinemultilinemultilinemultiline </div> </div> </body>
does know if achievable in pure css? i'd rather not have use js layout, problem making me tear hair out.
if set bottom: 0
, leave out top
styling, absolutely positioned div should expand up.
Comments
Post a Comment