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