CODEWITHSUNDEEP
htmlcss
posfan12
posfan12

Reputation: 2651

Indenting and aligning lines after the first

I have the following block of text.

enter image description here

I would like to indent the yellow text, so that all the yellow lines are lined up on their left edges.

Per another answer, I tried text-indent:-3em;padding-left:3em;, but this only affects subsequent lines after the first.

Can this be accomplished using CSS? Or do I need to construct another table?

Here is one example. It is just a single line of markup.

<td>PC: <span style="font-size:smaller;">US 104 Key (ANSI), DE 105 Key (ISO), FR 105 Key (ISO), UK 105 Key (ISO), ES 105 Key (ISO), US 104 Key (Dvorak)</span><br/>Mac: <span style="font-size:smaller;">US 109 Key (A1048), US 109 Key (A1243), UK 110 Key (A1048)</span></td>

except that I deleted the links when posting it.

Upvotes: 0

Views: 66

Answers (3)

Hassan Siddiqui
Hassan Siddiqui

Reputation: 2845

Make it sweet and simple. Thanks

.box {
  color: yellow;
  display: flex;
  margin-bottom: 10px;
}

.box .heading {
  color: #000;
  white-space: nowrap;
  margin-right: 10px;
}
<div class="box">
  <div class="heading">Heading 1:</div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

<div class="box">
  <div class="heading">Heading 1:</div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

Upvotes: 1

ℛɑƒ&#230;Ŀᴿᴹᴿ
ℛɑƒ&#230;Ŀᴿᴹᴿ

Reputation: 5346

Simple solution but jumping first line:

span {
  display: flex;
  padding-left: 3em;
  font-size: smaller; 
}
<td>PC:
  <span>US 104 Key (ANSI), DE 105 Key (ISO), FR 105 Key (ISO), 
  UK 105 Key (ISO), ES 105 Key (ISO), US 104 Key (Dvorak)</span>
  <br/>Mac:
  <span>US 109 Key (A1048), US 109 Key (A1243), UK 110 Key (A1048)</span>
</td>

Upvotes: 1

Johannes
Johannes

Reputation: 67778

That not-working solution you are quoting can be improved and extended to achieve what you are after:

.x {
  position: relative;
  left: 3em;
  width: calc(100% - 3em);
  color: green;
}

.y {
  display: inline-block;
  margin-left: -3em;
  width: 3em;
  color: red;
}
<div class="x">
  <div class="y">PC:</div>lkj sdflkj sdflkj sdflkj sdlfkj lsdkfj lksdjf lkjsd flkj sdflkj sdlfkj sdlfkj sdlfkj sldkfj lsdkjf lskdjf lkj sdflkj sdflkj sdflkj sdlfkj lsdkfj lksdjf lkjsd flkj sdflkj sdlfkj sdlfkj sdlfkj sldkfj lsdkjf lskdjf lkj sdflkj sdflkj sdflkj sdlfkj
  lsdkfj lksdjf lkjsd flkj sdflkj sdlfkj sdlfkj sdlfkj sldkfj lsdkjf lskdjf </div>
<div class="x">
  <div class="y">MAC:</div>lkj sdflkj sdflkj sdflkj sdlfkj lsdkfj lksdjf lkjsd flkj sdflkj sdlfkj sdlfkj sdlfkj sldkfj lsdkjf lskdjf lkj sdflkj sdflkj sdflkj sdlfkj lsdkfj lksdjf lkjsd flkj sdflkj sdlfkj sdlfkj sdlfkj sldkfj lsdkjf lskdjf lkj sdflkj sdflkj sdflkj sdlfkj
  lsdkfj lksdjf lkjsd flkj sdflkj sdlfkj sdlfkj sdlfkj sldkfj lsdkjf lskdjf lkj sdflkj sdflkj sdflkj sdlfkj lsdkfj lksdjf lkjsd flkj sdflkj sdlfkj sdlfkj sdlfkj sldkfj lsdkjf lskdjf </div>

Upvotes: 1

Related Questions