Question 290825 in Html Question posted in
Some basic documentation can be found here.

align pieces of a split line in html

I want to show some text in a, say, < h6 > element. The content is mostly fixed but few lines with some variable content I know may be too long.

  • I prefer to use n to organize the source text in lines as I want, because this way is very convenient in the source file;
  • I want the pieces of split text to be shown centered or right aligned, I will have to decide;
  • I want to indicate myself the optional splitting points, with < wbr > or something as I know the problematic lines and how I want to split them when they exceed length;
  • The first part of the split line I want to remain left aligned.

For example, in case of right aligned split:

Information foo: This is a normal line of text
Information bla:
             This is a line which had to be split

In case of center aligned split:

Information foo: This is a normal line of text
Information bla:
       This is a line which is very long and
             definitely would not fit

I found no solution to meet all these criteria. One annoying result was as such:

Information foo: This is a short line of text
Information bla:
Information  This is a line which is very long
bar: The line uses the space not occupied above

This happens, for example, with "float:right". I think is not possible to apply some style only to the element containing text but I prefer not to have each line in an element. As I said, using n to organize the content is very content. If possible, I would limit the usage of additional elements only to too long parts, like this:

<pre>
    Information foo: This is a normal line of textn
    Information bla:
         <span>This is a content which had to be split<span>n
</pre>

Another attempt would be like

<elem style="white-space: pre-wrap">
    Information foo: This is a normal line of textn
    Information bla:
         </elem><elem>This is a content which had to be split</elem><elem>n
    Details: some other line
</elem>

but not sure how to continue from here.

Tags:

2

Answers


  1. 0

    You can do this, but I’m not sure if this is what you are looking for.

    <p style="display: flex; flex-direction: column;">
    Temporibus quisquam harum fugit et id: n dolore ducimus quia, nisi ab?
</p>

    Then, use JS to separate and process the text.

    const p = document.querySelector("p");
const text = p.textContent;
const splitText = text.split("\n");
splitText[1] = `<span style="align-self: flex-end;">${splitText[1]}</span>`;
p.innerHTML = splitText.join("<br>");

    If you don’t want it to be on the absolute right, you can replace the align-self: flex-end; with padding-left.

    Keep in mind: <br> elements will be removed from the text!

    <p> blabla <br> blabla <p> will be <p>blablablablabla</p>
unless n is in the middle.

    Anyway, what you are trying to do is a bit unusual so that you will have unusual answers 🙂

    Login or Signup to reply.
  2. 0

    In the example below shows simple use of CSS class selectors and HTML inline-block elements. Details are in the text of the HTML.

    * {
  padding: 0;
}

:root {
  font: 2ch/1.15 "Segoe UI"
}

body {
  overflow-y: scroll;
}

h5 {
  margin-bottom: 0.25rem;
  font-size: 1.15rem;
}

main {
  margin: 10vh 5vw 10vh 2.5vw;
  resize: both;
  overflow-y: scroll;
}

section+section {
  margin-top: 1rem;
}

section:last-of-type {
  margin-bottom: 3rem;
}

code,
var {
  font-family: Consolas;
  color: navy;
}

var {
  color: grey;
}

.NwSe {
  display: inline-block;
  line-height: 0.5;
  transform: rotate(45deg) scale(2);
}


/**
 * The following rulesets are discussed within the text of the HTML.
 */

.seg {
  display: inline-block;
  vertical-align: top;
}

.hdr {
  width: fit-content;
  margin: 0;
  font-size: 1rem;
}

.txt {
  width: 80%;
}

.c {
  text-align: center;
  background: rgba(140, 191, 242, 0.3);
}

.r {
  text-align: right;
  background: rgba(255, 139, 39, 0.3);
}
    <main>
  <header>
    <h5>Resize <code>&lt;main&gt;</code></h5>
    <p>Scroll to the bottom then click and drag the right side corner. <b class="NwSe">⬄</b></p>
  </header>
  <hr>
  <section>
    <h6 class="seg hdr">First segment is left aligned: </h6>
    <span class="seg txt r">Second segment is right aligned.</span>
  </section>

  <section>
    <h6 class="seg hdr">First segment is left aligned: </h6>
    <span class="seg txt c">Second segment is center aligned.</span>
  </section>

  <section>
    <h6 class="seg hdr">HTML: </h6>
    <span class="seg txt c">Wrap a <code>&lt;h6&gt;</code> for each header text (first segment) and the remaining text in a <code>&lt;span&gt;</code>. Wrap the <code>&lt;h6&gt;</code> and <code>&lt;span&gt;</code>s in a <code>&lt;section&gt;</code>. Assign classes that have specific styles.</span>
  </section>

  <section>
    <h6 class="seg hdr">CSS: </h6>
    <span class="seg txt r">Each segment (<code>h6.seg</code> and <code>span.seg</code>) has the style <code>display: inline-block</code> so they'll sit next to each other and <code>vertical-align: top</code> so that the text always starts at the top. <code>&lt;h6&gt;</code> has <code>width: fit-content</code> so that it only is as wide as it's unbroken text. Each <code>span.seg</code> within is <var>80%</var> of the <code>&lt;section&gt;</code>'s width.</span>
  </section>
  <hr>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search