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

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -