How to start text in diffrent lines from the same position? HTML/CSS

Question

i have a problem with my HTML-Code

I have text, which looks like this:

abcdefgeh aaaaa
sudbaufsfowu aaaaa
subbfdb aaaa
ubsudfbfo aaaa
isnidfnfin aaaa
isndindinsin aaaa

But i want it to look like this:

abcdefgeh     aaaaa
sudbaufsfowu  aaaaa
subbfdb       aaaaa
ubsudfbfo     aaaaa
isnidfnfin    aaaaa
isndindinsin  aaaaa

How do i do this? Thanks in advance, Johann

There are multiple ways to do this! What is your markup? Is every line in a `p` tag or every row is wrapped in a `div`? Please share your HTML so I can tell you the better solution. — Shahriar, Oct 06 '21 at 18:32

score 0 · Accepted Answer · answered Oct 06 '21 at 18:33

0

Maybe use a table?

    <table>
        <tr>
            <td>abcdefgeh</td>
            <td>aaaaa</td>
        </tr>
        <tr>
            <td>sudbaufsfowu</td>
            <td>aaaaa</td>
        </tr>
        <tr>
            <td>subbfdb</td>
            <td>aaaaa</td>
        </tr>
        <tr>
            <td>ubsudfbfo</td>
            <td>aaaaa</td>
        </tr>
        <tr>
            <td>isnidfnfin</td>
            <td>aaaaa</td>
        </tr>
        <tr>
            <td>isndindinsin</td>
            <td>aaaaa</td>
        </tr>
    </table>

answered Oct 06 '21 at 18:33

Jason Landbridge

968
12
17

Thanks! It both worked – iion91 Oct 06 '21 at 20:42
:facepalm: 1995 called and wants its tables back. https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Stephen P Oct 06 '21 at 22:10
:BiGger-fACEpALM: Your link talks about using tables for page layout, my usage of table is perfectly fine for text. Read your own link. – Jason Landbridge Oct 07 '21 at 08:32

score 0 · Answer 2 · answered Oct 06 '21 at 18:37

There are several ways to do it. With Table or Grid. Here with the CSS Grid System.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". .";
}

<div class="container">
  <div>
    aaaaaaa
  </div>
  <div>
    bbbbbb
  </div>
</div>

score 0 · Answer 3 · answered Oct 06 '21 at 18:40

By default, HTML will treat many spaces as one space.

If you want your spacing to come out in fixed width and preserve the spaces that you have already inserted between the fields in your data, you could consider using the <pre> tag:

abcdefgeh     aaaaa
sudbaufsfowu  aaaaa
subbfdb       aaaaa
ubsudfbfo     aaaaa
isnidfnfin    aaaaa
isndindinsin  aaaaa

If your data doesn't have the spaces in already, you could consider using a <table> as already suggested or, perhaps, writing a script with awk to insert the desired number of spaces, then use the <pre> tag. It's likely that, if not using a table (or other similar layout objects), you will need to use a fixed-width font, to ensure consistency across browsers.

score 0 · Answer 4 · answered Oct 06 '21 at 18:55

You can try something like this as well.

p {
  margin: 0;
}
p span {
  display: inline-block;
  min-width: 120px
}

<p> <span> abcdefgeh </span>     aaaaa<p>
<p> <span> sudbaufsfowu </span>  aaaaa<p>
<p> <span> subbfdb </span>       aaaaa<p>
<p> <span> ubsudfbfo </span>     aaaaa<p>
<p> <span> isnidfnfin </span>    aaaaa<p>
<p> <span> isndindinsin </span>  aaaaa<p>

How to start text in diffrent lines from the same position? HTML/CSS

4 Answers4