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

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -