CODEWITHSUNDEEP
javascripthtmlcss
Steve Lennon
Steve Lennon

Reputation: 89

Cannot align text in CSS

In the output of the 'About', I want the new line in just below 'Lorem', but the new line (from 'incididunt') moves below colon(:). Content of About is dynamic, the reviving text can/cannot be this long, so i cant use text-align, as it moves colon(:) as well.

How can I align it as I want?

enter image description here

<table>
  <tr>
   <td>
     <div>Docteur</div>
   </td>
   <td>
    <div>:&nbsp;&nbsp; Name of Doctor</div>
   </td>
  </tr> 
  <tr>
   <td>
     <div>About</div>
   </td>
   <td>
    <div>:&nbsp;&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad min </div>
   </td>
  </tr> 
    <tr>
   <td>
     <div>Location</div>
   </td>
   <td>
    <div>:&nbsp;&nbsp; Some Location</div>
   </td>
  </tr> 
</table>

Upvotes: 0

Views: 111

Answers (4)

BlueChip
BlueChip

Reputation: 774

You can try with the following codes.

To check more detail, please click here.

td {
  vertical-align: top;
}
.td-flex {
  display: flex;
}
.td-flex span {
  margin-left: auto;
  padding-left: 10px; /* you can change this value */
  padding-right: 10px; /* you can change this value */
}
<table>
  <tr>
   <td class="td-flex">
     <div>Docteur</div><span>:</span>
   </td>
   <td>
    <div>Name of Doctor</div>
   </td>
  </tr> 
  <tr>
   <td class="td-flex">
     <div>About</div><span>:</span>
   </td>
   <td>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad min </div>
   </td>
  </tr> 
    <tr>
   <td class="td-flex">
     <div>Location</div><span>:</span>
   </td>
   <td>
    <div>Some Location</div>
   </td>
  </tr> 
</table>

Upvotes: 0

koeer
koeer

Reputation: 1

<table>
  <tr>
   <td>
     <div>Docteur</div>
   </td>
   <td>
    <div class="align">Name of Doctor</div>
   </td>
  </tr> 
  <tr>
   <td>
     <div>About</div>
   </td>
   <td>
    <div class="align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad min </div>
   </td>
  </tr> 
    <tr>
   <td>
     <div>Location</div>
   </td>
   <td>
    <div class="align">Some Location</div>
   </td>
  </tr> 
</table>

You need to add a class e.g. 'align' to div element, to remove duplicate colon :

td {
  vertical-align: top;
}

div.align {
  padding-left: 1em;
  position: relative;
}

div.align::before {
  content: ":";
  left: 0;
  position: absolute;
}

Upvotes: -1

Joshua L.
Joshua L.

Reputation: 31

In the html file you posted, add a class to the div tags that represent the dynamic data (ie. <div class="userEntry">) In the css file, reference div class tag (ie .userEntry{}) and add padding to the left by typing padding-left: <value>.

If you go this route, you can remove the &nbsp as spacing will be handled solely by the padding in css.

Note: if the value you use for padding-left is in pixels, the content will not be responsive: consider using percentages or other methods.

Upvotes: 0

shadow-lad
shadow-lad

Reputation: 538

You can add a column just for the colons like so and align the td elements using the vertical-align css property to always be on top rather than in the middle.

td {
  vertical-align: top;
}
<table>
  <tr>
    <td>
      <div>Docteur</div>
    </td>
    <td>
      :
    </td>
    <td>
      <div>Name of Doctor</div>
    </td>
  </tr>
  <tr>
    <td>
      <div>About</div>
    </td>
    <td>
      :
    </td>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad min </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>Location</div>
    </td>
    <td>
      :
    </td>
    <td>
      <div>Some Location</div>
    </td>
  </tr>
</table>

Upvotes: 2

Related Questions