html - How to do a hanging indent when other content is present -
i have issue variation on getting hanging indent work.
i have searched on getting hanging indent work, common solution set padding of x px , text-indent of -x px.
i can work on own, if span in container link, causes span shifted down line.
markup code:
<table> <tr> <td class="first"> <a href="#">888.555-222</a> <span>lorem ipsum dolor sit amet, ex sed ornatus appetere. modus consequat ut sed. mel ne sumo dico possim, duo doming albucius gubergren, mea posse quodsi id. usu </span> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> css:
td.first { width: 30%; } { display: inline-block; width: 60px; } span { display: inline-block; padding-left: 60px; text-indent: -60px; } here simple js fiddle showing issue: https://jsfiddle.net/spm4xqw5/ want span on same line link, if text wraps want subsequent lines indented.
i'm not entirely sure want achieve, if need 2 inline-blocks side side in container of limited width, need set width of both inline-blocks explicitly.
a of 60px , td of 30%, span needs 30%-60px wide.
no need text-indent or padding. boxes of different height, added vertical-align measure.
td.first { width: 30%; } { display: inline-block; width: 60px; } span { display: inline-block; /* padding-left: 60px; text-indent: -60px; */ width:calc(30% - 60px); vertical-align:top; } <table> <tr> <td class="first"> <p> <a href="#">888.555-222</a> <span>lorem ipsum dolor sit amet, ex sed ornatus appetere. modus consequat ut sed. mel ne sumo dico possim, duo doming albucius gubergren, mea posse quodsi id. usu </span> </p> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> now reason why i'm not sure want, contents of a wider 60px, overflow out of a span. nothing fatal though, hope.
Comments
Post a Comment