0

I have a piece of text that I am trying to align correctly. I have a hyphen that comes before the first line of text. The problem is that the second line of text is sitting under the hyphen as a pose to the starting text of the first line. I have an image of what is happening to explain better.

enter image description here

Here is my code

  <div>
    <span>-</span> 
    <span>The fund or the employer gave a housing loan to the member and the member owes money on the loan.</span>
  </div>

If I add margin left to the second span it only adds margin to the first line. Also I am not allowed to make the text fit on a single line. It need to go over to the new line like this.

Any ideas?

skydev
  • 1,867
  • 9
  • 37
  • 71

2 Answers2

1

Use flexbox

.block{
  display:flex;
}
.mr-5{
  margin-right:5px;
}
<div class="block">
    <span class="mr-5">-</span> 
    <span>The fund or the employer gave a housing loan to the member and the member owes money on the loan. The fund or the employer gave a housing loan to the member and the member owes money on the loan.The fund or the employer gave a housing loan to the member and the member owes money on the loan.</span>
  </div>
Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40
-1

Why not try using the "pre" tag for html.

Text in a "pre" element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

See if that works for you.

Jason Sturch
  • 16
  • 5