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

How to line up text that is an innerhtml

I’m trying to line break the text for INDIVIDUAL and PHONE. I figured out how to break the text, but I can’t get it to line up with the other text.

Current code

document.getElementById("department").innerHTML = department[i]
document.getElementById("location").innerHTML = locationA[i]
document.getElementById("people").innerHTML = peopleCurrentVarStr.replace(/,/g, "<br>")
document.getElementById("phone").innerHTML = phoneNumberStr.replace(/,/g, "<br />")
span.a {
  width: 100px;
  height: 100px;
  background-color: yellow;
}
<h1>DEPARTMENT: <span class="a" id="department"></span></h1>
<h1>LOCATION: <span class="a" id="location"></span></h1>
<h1>INDIVIDUAL: <span class="a" id="people"></span></h1>
<h1>PHONE: <span class="a" id="phone"></span></h1>

My Website

Tags:

3

Answers


  1. 0

    for your innerHTML you should probably output them into lists <ul><li></li></ul>

    Login or Signup to reply.
  2. 0

    First, you should avoid using innerHTML when possible due to security and performance implications. And, when the text you are working with doesn’t contain any HTML, you definitely shouldn’t use .innerHTML and instead just use .textContent. Then, within your JavaScript strings, you can use the escape code for a new line: n.

    Also, your use of h1 is incorrect. Heading elements (h1...h6) should be used to set up document structure, not because of the way they style text. As such, there should rarely be more than one h1 on a page.

    Finally, to your question, if you simply place each piece of data into its own span element and, with CSS, set those spans to be inline-block, you can then set a width for the two columns of data contained within your elements and you’ll be all set:

    // Use n within the string to force a new line
document.getElementById("department").textContent = "TEMP TEXT";
document.getElementById("location").textContent =  "TEMP TEXT";
document.getElementById("people").textContent =  "TEMP TEXTnMORE TEXT";
document.getElementById("phone").textContent =  "555-666-7777n888-999-0000";
    /* Allow the selected SPAN elements to allow for block level formatting
   while still being inline elements. */
span.a, span.category { display:inline-block; }

/* Set widths and styling of specific SPANS */
span.category { width:150px;}
span.a{
    width: 100px;
    background-color: yellow;
    border:1px solid black;
}
    <!-- put each piece of data into its own SPAN -->
<div><span class="category">DEPARTMENT: </span><span class="a" id="department"></span></div>
<div><span class="category">LOCATION: </span><span class="a" id="location"></span></div>
<div><span class="category">INDIVIDUAL: </span><span class="a" id="people"></span></div>
<div><span class="category">PHONE: </span><span class="a" id="phone"></span></div>
    Login or Signup to reply.
  3. 0

    The way your code is being presented, it looks more like a definition list and a bunch of headlines.

    dl {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 300px;
  overflow: visible;
}

dt, dd {
  flex: 50%;
}

dd {
  margin-left: auto;
}

dt {
  font-weight: bold;
}
    <dl>
  <dt>DEPARTMENT:</dt>
  <dd>AA</dd>

  <dt>LOCATION:</dt>
  <dd>BB 1<br/>BB 2<br/>BB 3</dd>

  <dt>INDIVIDUAL:</dt>
  <dd>CC 1<br/>CC 2<br/>CC 3</dd>

  <dt>PHONE:</dt>
  <dd>DD</dd>
</dl>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search