Align Text with Indent

Question

Is it possible to align text with indent over multiple lines and responsible? Like two Columns which breaks when the window ist too small.

For Example:

When Content fits in one Line:

Text        Value
Longer Text Value
Text        Longer Value

When Content does not fit in one Line:

Text
Value

Longer Text
Value

Text
Longer Value

The first text should so long it needs, so I don't wan't extra space behind it.

Here is a example where I have a fixed length of the text "column":

dt {
  width: 6em; //I want a solution without a width
  display: inline-grid;
}

dt,
dd {
  float: left
}

dt {
  clear: both
}

<dl>
  <dt>Text</dt>
  <dd>Value</dd>
  <dt>Longer Text</dt>
  <dd>Value</dd>
  <dt>Text</dt>
  <dd>Longer Value</dd>
</dl>

So I want the same result without setting the min-width or width of the text "column".

Possible duplicate of [Best Way to do Columns in HTML/CSS](https://stackoverflow.com/questions/9966890/best-way-to-do-columns-in-html-css) — Tijmen, Oct 12 '17 at 16:54
@Tilo any responsive site you see is done by having code in the background making it responsive. Take a look at media queries https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries — Huangism, Oct 12 '17 at 17:00
@Tijmen no solution works like I want. They only has the one row aspect or not doing a dynamic length of the columns. — Tilo, Oct 12 '17 at 17:03
@Huangism you think I should make a table and a media query for the break machnism? Then media query has to be dynamic for each set of a list, becouse every list has another length which it should break. — Tilo, Oct 12 '17 at 17:06
@Tilo your example shows big window 2 col and small window 1 col and does not mention anything about the actual content. Your big/small window would be where media query comes in. As for the content, you are going to have to give some examples — Huangism, Oct 12 '17 at 17:09
@Huangism I edited my post, so that you could understand my problem better. — Tilo, Oct 12 '17 at 17:17
@Tilo yea ok so it's just media query but the media query will apply to all of your lists. — Huangism, Oct 12 '17 at 17:29

troxylvania · Answer 1 · 2017-10-12T19:28:18.167

0

Misunderstood your first question. This styling would adjust based on screen-size. You'll want to assign your element style names as using just this would mess up your page.

.lineTitle{
  width: 6em;
  display:block;
  font-weight:bold;
}
.yourList  {margin-bottom:10px; }

@media (min-width:768px){
.lineTitle {display: inline;}
  .yourList  {margin-bottom:0px; }
}

UPDATED: You just need to wrap them in spans and name them.

 <div>
  <div class="yourList">
    <span class="lineTitle">Text</span>
    <span class="lineValue">Value</span>
  </div>
   <div class="yourList">
    <span class="lineTitle">Text</span>
    <span class="lineValue">Value</span>
  </div>
  <div class="yourList">
    <span class="lineTitle">Text</span>
    <span class="lineValue">Longer Value</span>
  </div>
</div>

edited Oct 12 '17 at 19:28

answered Oct 12 '17 at 17:14

troxylvania

1
2

Can you make a example with my added example? – Tilo Oct 12 '17 at 17:19
Edited to correlate with your new code. The columns I mentioned before were unnecessary. – troxylvania Oct 12 '17 at 17:35
I want an universal code, so without the width in the b tag. – Tilo Oct 12 '17 at 18:08
Updated to be controlled without the b tag. – troxylvania Oct 12 '17 at 19:29

score 0 · Answer 2 · edited Oct 19 '17 at 05:23

0

CSS "column-count" can achieve this, but if the text and value pairs are related, a definition list would be more semantic:

<dl>
    <dt>Text</dt>
    <dd>Value</dd>
    <dt>Longer Text</dt>
    <dd>Value</dd>
    <dt>Text</dt>
    <dd>Longer Value</dd>
</dl>

With a media query you can also change the layout for smaller vs larger screen sizes.

Working example here: https://codepen.io/code-and-pixels/pen/WZKKgE

edited Oct 19 '17 at 05:23

marc_s

732,580
175
1,330
1,459

answered Oct 12 '17 at 17:27

code and pixels

644
7
13

The Problem in your solution is that the width of the dt is fixed to 150px and not dynamic. – Tilo Oct 12 '17 at 17:37
That's just an example -- the width could be set to any relative unit of measure (%, em, etc.). There was no specific design or layout context provided so I threw that in. – code and pixels Oct 12 '17 at 17:39
I want an universal Code where I have to set no width. So I can use it with smaller and longer texts. – Tilo Oct 12 '17 at 18:07
You're unlikely to find a solution without any width setting at all. A width setting just provides layout context -- without it the width will be set for each pair based on what the content is. That's not really acceptable in most UI situations. I mean, it sounds like you want to use a old school table for layout. That's ill advised for so many reasons, but your no-width-but-still-in-a-single-column requirement is limiting. – code and pixels Oct 12 '17 at 18:38

Align Text with Indent

2 Answers2