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

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

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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.

CodePudding user response：

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>