Format plaintext string into two columns that are aligned

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

0

I'm looking for help with how to better organize my string output in a web app I'm developing.

The output goes to a textarea box and is always in this format:

TITLE: Some short text here

or

TITLE: Some longer text here that might get to the end
of the line and wrap under the left column. I'd like to add the same padding
to new lines so they are neatly under the right sided text column.

I add .padEnd(25) to the text in the left column, to create an even start for the right column. But I can't figure out how to keep all the text in a string longer than 50 characters aligned right under the column?

I think I need to split based on the first space after 50 characters, and add the 25 character left padding to each line, it might work? But I can't figure out the way to do this, so that the text looks like:

TITLE: Some short text here

NEXT: Some longer text here that might get to the end
of the line and wrap under the left column. I'd
like to add the same padding to new lines so they
are neatly under the right sided text column.

Some users will copy and paste this into their own document, so that is why I'm going through the trouble of trying to sort it out in a makeshift manner within plain text.

Thanks.

Updated with example HTML for the User inputs

<div class="input-group py-1">

    <span class="input-group-addon"> TITLE </span>

    <select class="form-control" id="ext-title">

        <option>The Hobbit</option>

        <option>Lord of the Rings</option>

        <option>Mortal Engines</option>

    </select>

</div>



<div class="input-group py-1">

    <span class="input-group-addon"> NEXT </span>

    <textarea class="form-control py-1 w-100" id="ext-long" rows="3" placeholder="Specify your ideas"></textarea>

</div>

And sample of my script

var ext_title = $("#ext-title").val();

var ext_long  = $("#ext-long").val();

var text      = '';

text          +=  "nTITLE:".padEnd(25) + ext_title +

                  "nNEXT:".padEnd(25) + ext_long + "n";

javascript jquery string

share|improve this question

edited Jan 3 at 23:56

Luiz Fernando Corrêa Leite

635

asked Jan 3 at 3:08

user1837608user1837608

5481526

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is that input a plain multiline string? (Can you post the string definition, eg const input = `TITLE: etc etc, along with the NEXT part?)
  
  – CertainPerformance
  Jan 3 at 3:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The input is indeed a plain string. The left column represents categories, padded with 25 spaces, and the right column is plain text that the user enters in the app. The code looks like this: var input = "TITLE:".padEnd(25) + userInput + "n";. The userInput is an input box or textarea where the user can type their answers.
  
  – user1837608
  Jan 3 at 3:16
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If userInput can contain newlines, that could complicate things - what's your desired behavior there? Do you want to preserve them, or format the text as if the newlines (in the userInput) weren't there at all?
  
  – CertainPerformance
  Jan 3 at 3:19
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ideally, if the text entered into userInput contained new lines (such as in paragraph format), then those should be preserved.
  
  – user1837608
  Jan 3 at 3:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What does the HTML look like?
  
  – user2182349
  Jan 3 at 3:35
  

  
  
  
  

 | 
show 1 more comment

0

I'm looking for help with how to better organize my string output in a web app I'm developing.

The output goes to a textarea box and is always in this format:

TITLE: Some short text here

or

TITLE: Some longer text here that might get to the end
of the line and wrap under the left column. I'd like to add the same padding
to new lines so they are neatly under the right sided text column.

I add .padEnd(25) to the text in the left column, to create an even start for the right column. But I can't figure out how to keep all the text in a string longer than 50 characters aligned right under the column?

I think I need to split based on the first space after 50 characters, and add the 25 character left padding to each line, it might work? But I can't figure out the way to do this, so that the text looks like:

TITLE: Some short text here

NEXT: Some longer text here that might get to the end
of the line and wrap under the left column. I'd
like to add the same padding to new lines so they
are neatly under the right sided text column.

Some users will copy and paste this into their own document, so that is why I'm going through the trouble of trying to sort it out in a makeshift manner within plain text.

Thanks.

Updated with example HTML for the User inputs

<div class="input-group py-1">

    <span class="input-group-addon"> TITLE </span>

    <select class="form-control" id="ext-title">

        <option>The Hobbit</option>

        <option>Lord of the Rings</option>

        <option>Mortal Engines</option>

    </select>

</div>



<div class="input-group py-1">

    <span class="input-group-addon"> NEXT </span>

    <textarea class="form-control py-1 w-100" id="ext-long" rows="3" placeholder="Specify your ideas"></textarea>

</div>

And sample of my script

var ext_title = $("#ext-title").val();

var ext_long  = $("#ext-long").val();

var text      = '';

text          +=  "nTITLE:".padEnd(25) + ext_title +

                  "nNEXT:".padEnd(25) + ext_long + "n";

javascript jquery string

share|improve this question

edited Jan 3 at 23:56

Luiz Fernando Corrêa Leite

635

asked Jan 3 at 3:08

user1837608user1837608

5481526

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is that input a plain multiline string? (Can you post the string definition, eg const input = `TITLE: etc etc, along with the NEXT part?)
  
  – CertainPerformance
  Jan 3 at 3:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The input is indeed a plain string. The left column represents categories, padded with 25 spaces, and the right column is plain text that the user enters in the app. The code looks like this: var input = "TITLE:".padEnd(25) + userInput + "n";. The userInput is an input box or textarea where the user can type their answers.
  
  – user1837608
  Jan 3 at 3:16
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If userInput can contain newlines, that could complicate things - what's your desired behavior there? Do you want to preserve them, or format the text as if the newlines (in the userInput) weren't there at all?
  
  – CertainPerformance
  Jan 3 at 3:19
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ideally, if the text entered into userInput contained new lines (such as in paragraph format), then those should be preserved.
  
  – user1837608
  Jan 3 at 3:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What does the HTML look like?
  
  – user2182349
  Jan 3 at 3:35
  

  
  
  
  

 | 
show 1 more comment

0

0

0

I'm looking for help with how to better organize my string output in a web app I'm developing.

The output goes to a textarea box and is always in this format:

TITLE: Some short text here

or

TITLE: Some longer text here that might get to the end
of the line and wrap under the left column. I'd like to add the same padding
to new lines so they are neatly under the right sided text column.

I add .padEnd(25) to the text in the left column, to create an even start for the right column. But I can't figure out how to keep all the text in a string longer than 50 characters aligned right under the column?

I think I need to split based on the first space after 50 characters, and add the 25 character left padding to each line, it might work? But I can't figure out the way to do this, so that the text looks like:

TITLE: Some short text here

NEXT: Some longer text here that might get to the end
of the line and wrap under the left column. I'd
like to add the same padding to new lines so they
are neatly under the right sided text column.

Some users will copy and paste this into their own document, so that is why I'm going through the trouble of trying to sort it out in a makeshift manner within plain text.

Thanks.

Updated with example HTML for the User inputs

<div class="input-group py-1">

    <span class="input-group-addon"> TITLE </span>

    <select class="form-control" id="ext-title">

        <option>The Hobbit</option>

        <option>Lord of the Rings</option>

        <option>Mortal Engines</option>

    </select>

</div>



<div class="input-group py-1">

    <span class="input-group-addon"> NEXT </span>

    <textarea class="form-control py-1 w-100" id="ext-long" rows="3" placeholder="Specify your ideas"></textarea>

</div>

And sample of my script

var ext_title = $("#ext-title").val();

var ext_long  = $("#ext-long").val();

var text      = '';

text          +=  "nTITLE:".padEnd(25) + ext_title +

                  "nNEXT:".padEnd(25) + ext_long + "n";

javascript jquery string

share|improve this question

edited Jan 3 at 23:56

Luiz Fernando Corrêa Leite

635

asked Jan 3 at 3:08

user1837608user1837608

5481526

I'm looking for help with how to better organize my string output in a web app I'm developing.

The output goes to a textarea box and is always in this format:

TITLE: Some short text here

or

TITLE: Some longer text here that might get to the end
of the line and wrap under the left column. I'd like to add the same padding
to new lines so they are neatly under the right sided text column.

I add .padEnd(25) to the text in the left column, to create an even start for the right column. But I can't figure out how to keep all the text in a string longer than 50 characters aligned right under the column?

I think I need to split based on the first space after 50 characters, and add the 25 character left padding to each line, it might work? But I can't figure out the way to do this, so that the text looks like:

TITLE: Some short text here

NEXT: Some longer text here that might get to the end
of the line and wrap under the left column. I'd
like to add the same padding to new lines so they
are neatly under the right sided text column.

Some users will copy and paste this into their own document, so that is why I'm going through the trouble of trying to sort it out in a makeshift manner within plain text.

Thanks.

Updated with example HTML for the User inputs

<div class="input-group py-1">

    <span class="input-group-addon"> TITLE </span>

    <select class="form-control" id="ext-title">

        <option>The Hobbit</option>

        <option>Lord of the Rings</option>

        <option>Mortal Engines</option>

    </select>

</div>



<div class="input-group py-1">

    <span class="input-group-addon"> NEXT </span>

    <textarea class="form-control py-1 w-100" id="ext-long" rows="3" placeholder="Specify your ideas"></textarea>

</div>

And sample of my script

var ext_title = $("#ext-title").val();

var ext_long  = $("#ext-long").val();

var text      = '';

text          +=  "nTITLE:".padEnd(25) + ext_title +

                  "nNEXT:".padEnd(25) + ext_long + "n";

javascript jquery string

javascript jquery string

share|improve this question

edited Jan 3 at 23:56

Luiz Fernando Corrêa Leite

635

asked Jan 3 at 3:08

user1837608user1837608

5481526

share|improve this question

edited Jan 3 at 23:56

Luiz Fernando Corrêa Leite

635

asked Jan 3 at 3:08

user1837608user1837608

5481526

share|improve this question

share|improve this question

edited Jan 3 at 23:56

Luiz Fernando Corrêa Leite

635

edited Jan 3 at 23:56

Luiz Fernando Corrêa Leite

635

edited Jan 3 at 23:56

Luiz Fernando Corrêa Leite

635

635

asked Jan 3 at 3:08

user1837608user1837608

5481526

asked Jan 3 at 3:08

user1837608user1837608

5481526

asked Jan 3 at 3:08

user1837608user1837608

5481526

5481526

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is that input a plain multiline string? (Can you post the string definition, eg const input = `TITLE: etc etc, along with the NEXT part?)
  
  – CertainPerformance
  Jan 3 at 3:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The input is indeed a plain string. The left column represents categories, padded with 25 spaces, and the right column is plain text that the user enters in the app. The code looks like this: var input = "TITLE:".padEnd(25) + userInput + "n";. The userInput is an input box or textarea where the user can type their answers.
  
  – user1837608
  Jan 3 at 3:16
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If userInput can contain newlines, that could complicate things - what's your desired behavior there? Do you want to preserve them, or format the text as if the newlines (in the userInput) weren't there at all?
  
  – CertainPerformance
  Jan 3 at 3:19
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ideally, if the text entered into userInput contained new lines (such as in paragraph format), then those should be preserved.
  
  – user1837608
  Jan 3 at 3:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What does the HTML look like?
  
  – user2182349
  Jan 3 at 3:35
  

  
  
  
  

 | 
show 1 more comment

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is that input a plain multiline string? (Can you post the string definition, eg const input = `TITLE: etc etc, along with the NEXT part?)
  
  – CertainPerformance
  Jan 3 at 3:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The input is indeed a plain string. The left column represents categories, padded with 25 spaces, and the right column is plain text that the user enters in the app. The code looks like this: var input = "TITLE:".padEnd(25) + userInput + "n";. The userInput is an input box or textarea where the user can type their answers.
  
  – user1837608
  Jan 3 at 3:16
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If userInput can contain newlines, that could complicate things - what's your desired behavior there? Do you want to preserve them, or format the text as if the newlines (in the userInput) weren't there at all?
  
  – CertainPerformance
  Jan 3 at 3:19
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ideally, if the text entered into userInput contained new lines (such as in paragraph format), then those should be preserved.
  
  – user1837608
  Jan 3 at 3:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What does the HTML look like?
  
  – user2182349
  Jan 3 at 3:35
  

  
  
  
  

Is that input a plain multiline string? (Can you post the string definition, eg const input = `TITLE: etc etc, along with the NEXT part?)

– CertainPerformance
Jan 3 at 3:12

Is that input a plain multiline string? (Can you post the string definition, eg const input = `TITLE: etc etc, along with the NEXT part?)

– CertainPerformance
Jan 3 at 3:12

The input is indeed a plain string. The left column represents categories, padded with 25 spaces, and the right column is plain text that the user enters in the app. The code looks like this: var input = "TITLE:".padEnd(25) + userInput + "n";. The userInput is an input box or textarea where the user can type their answers.

– user1837608
Jan 3 at 3:16

The input is indeed a plain string. The left column represents categories, padded with 25 spaces, and the right column is plain text that the user enters in the app. The code looks like this: var input = "TITLE:".padEnd(25) + userInput + "n";. The userInput is an input box or textarea where the user can type their answers.

– user1837608
Jan 3 at 3:16

If userInput can contain newlines, that could complicate things - what's your desired behavior there? Do you want to preserve them, or format the text as if the newlines (in the userInput) weren't there at all?

– CertainPerformance
Jan 3 at 3:19

If userInput can contain newlines, that could complicate things - what's your desired behavior there? Do you want to preserve them, or format the text as if the newlines (in the userInput) weren't there at all?

– CertainPerformance
Jan 3 at 3:19

Ideally, if the text entered into userInput contained new lines (such as in paragraph format), then those should be preserved.

– user1837608
Jan 3 at 3:29

Ideally, if the text entered into userInput contained new lines (such as in paragraph format), then those should be preserved.

– user1837608
Jan 3 at 3:29

What does the HTML look like?

– user2182349
Jan 3 at 3:35

What does the HTML look like?

– user2182349
Jan 3 at 3:35

 | 
show 1 more comment

2 Answers
2

active

oldest

votes

0

CSS to the rescue :)

(we are JS developers after all right?)

HTML

<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="styles.css">

    </head>

<body>

    <div class="section">

        <span class="title">Title</span>

        <span class="column">

            Heres my long text which needs to potentially longer that 50 characters

        </span>

    </div>

    <div class="section">

        <span class="title">Title</span>

        <span class="column">

            Heres my long text which needs to potentially longer that 50 characters

        </span>

    </div>

</body>

</html>

CSS (styles.css)

.section {

    display: flex;

    margin-bottom: 10px;

}



.column {

    margin-left: 100px;

}

Use margin-left to specify the distance from the titles, the words will wrap around but will stick in the column that is defined by the 'column' span

share|improve this answer

answered Jan 3 at 3:55

Happy MachineHappy Machine

452213

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, but I'm not trying to format the HTML into columns, I can do that with CSS as you suggested. But rather, I want to format the plaintext output of my script into a two column arrangement. This would use some combination of padding with spaces, artificial new lines and padding within the new lines.
  
  – user1837608
  Jan 3 at 14:03
  

  
  
  
  

add a comment | 

0

Okay, I messed around with a match function to create an array of text, delimited by after the 5th space (to match about 50 characters of space - I know this ain't exact). The I loop through the array, adding a pad of 25 characters before joining each item in the array back to a string.

I used this bit of code to get the effect

var text = $("#orig").text();



var text2 = text.match(/(.*?s){1,5}/g);

var padded = text2[0]; // get first line



for (var i=1; i < text2.length; i++) {

    padded += "n".padEnd(25)+text2[i]; // pad subsequent lines





var line = "TITLE:".padEnd(25) + padded +

                    "nNEXT:".padEnd(25) + padded;



$("#new").val(line);

And get this output:

TITLE:                  Lorem ipsum dolor sit amet, 

                        consectetur adipiscing elit. Proin molestie 

                        leo vel odio vulputate, in 

                        tincidunt magna laoreet. Duis feugiat 

                        mi vel consequat finibus. Aenean 

                        eu tellus feugiat, rhoncus libero 

                        sed, condimentum felis.



NEXT:                   Lorem ipsum dolor sit amet, 

                        consectetur adipiscing elit. Proin molestie 

                        leo vel odio vulputate, in 

                        tincidunt magna laoreet. Duis feugiat 

                        mi vel consequat finibus. Aenean 

                        eu tellus feugiat, rhoncus libero 

                        sed, condimentum felis.

Now I wonder if someone can help me get this into a string prototype? That way it can be invoked when needed in different parts of the code?

share|improve this answer

answered Jan 3 at 16:00

user1837608user1837608

5481526

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015820%2fformat-plaintext-string-into-two-columns-that-are-aligned%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

active

oldest

votes

active

oldest

votes

0

CSS to the rescue :)

(we are JS developers after all right?)

HTML

<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="styles.css">

    </head>

<body>

    <div class="section">

        <span class="title">Title</span>

        <span class="column">

            Heres my long text which needs to potentially longer that 50 characters

        </span>

    </div>

    <div class="section">

        <span class="title">Title</span>

        <span class="column">

            Heres my long text which needs to potentially longer that 50 characters

        </span>

    </div>

</body>

</html>

CSS (styles.css)

.section {

    display: flex;

    margin-bottom: 10px;

}



.column {

    margin-left: 100px;

}

Use margin-left to specify the distance from the titles, the words will wrap around but will stick in the column that is defined by the 'column' span

share|improve this answer

answered Jan 3 at 3:55

Happy MachineHappy Machine

452213

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, but I'm not trying to format the HTML into columns, I can do that with CSS as you suggested. But rather, I want to format the plaintext output of my script into a two column arrangement. This would use some combination of padding with spaces, artificial new lines and padding within the new lines.
  
  – user1837608
  Jan 3 at 14:03
  

  
  
  
  

add a comment | 

0

CSS to the rescue :)

(we are JS developers after all right?)

HTML

<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="styles.css">

    </head>

<body>

    <div class="section">

        <span class="title">Title</span>

        <span class="column">

            Heres my long text which needs to potentially longer that 50 characters

        </span>

    </div>

    <div class="section">

        <span class="title">Title</span>

        <span class="column">

            Heres my long text which needs to potentially longer that 50 characters

        </span>

    </div>

</body>

</html>

CSS (styles.css)

.section {

    display: flex;

    margin-bottom: 10px;

}



.column {

    margin-left: 100px;

}

Use margin-left to specify the distance from the titles, the words will wrap around but will stick in the column that is defined by the 'column' span

share|improve this answer

answered Jan 3 at 3:55

Happy MachineHappy Machine

452213

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, but I'm not trying to format the HTML into columns, I can do that with CSS as you suggested. But rather, I want to format the plaintext output of my script into a two column arrangement. This would use some combination of padding with spaces, artificial new lines and padding within the new lines.
  
  – user1837608
  Jan 3 at 14:03
  

  
  
  
  

add a comment | 

0

0

0

CSS to the rescue :)

(we are JS developers after all right?)

HTML

<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="styles.css">

    </head>

<body>

    <div class="section">

        <span class="title">Title</span>

        <span class="column">

            Heres my long text which needs to potentially longer that 50 characters

        </span>

    </div>

    <div class="section">

        <span class="title">Title</span>

        <span class="column">

            Heres my long text which needs to potentially longer that 50 characters

        </span>

    </div>

</body>

</html>

CSS (styles.css)

.section {

    display: flex;

    margin-bottom: 10px;

}



.column {

    margin-left: 100px;

}

Use margin-left to specify the distance from the titles, the words will wrap around but will stick in the column that is defined by the 'column' span

share|improve this answer

answered Jan 3 at 3:55

Happy MachineHappy Machine

452213

CSS to the rescue :)

(we are JS developers after all right?)

HTML

<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="styles.css">

    </head>

<body>

    <div class="section">

        <span class="title">Title</span>

        <span class="column">

            Heres my long text which needs to potentially longer that 50 characters

        </span>

    </div>

    <div class="section">

        <span class="title">Title</span>

        <span class="column">

            Heres my long text which needs to potentially longer that 50 characters

        </span>

    </div>

</body>

</html>

CSS (styles.css)

.section {

    display: flex;

    margin-bottom: 10px;

}



.column {

    margin-left: 100px;

}

Use margin-left to specify the distance from the titles, the words will wrap around but will stick in the column that is defined by the 'column' span

share|improve this answer

answered Jan 3 at 3:55

Happy MachineHappy Machine

452213

share|improve this answer

share|improve this answer

answered Jan 3 at 3:55

Happy MachineHappy Machine

452213

answered Jan 3 at 3:55

Happy MachineHappy Machine

452213

answered Jan 3 at 3:55

Happy MachineHappy Machine

452213

452213

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, but I'm not trying to format the HTML into columns, I can do that with CSS as you suggested. But rather, I want to format the plaintext output of my script into a two column arrangement. This would use some combination of padding with spaces, artificial new lines and padding within the new lines.
  
  – user1837608
  Jan 3 at 14:03
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, but I'm not trying to format the HTML into columns, I can do that with CSS as you suggested. But rather, I want to format the plaintext output of my script into a two column arrangement. This would use some combination of padding with spaces, artificial new lines and padding within the new lines.
  
  – user1837608
  Jan 3 at 14:03
  

  
  
  
  

Thanks, but I'm not trying to format the HTML into columns, I can do that with CSS as you suggested. But rather, I want to format the plaintext output of my script into a two column arrangement. This would use some combination of padding with spaces, artificial new lines and padding within the new lines.

– user1837608
Jan 3 at 14:03

Thanks, but I'm not trying to format the HTML into columns, I can do that with CSS as you suggested. But rather, I want to format the plaintext output of my script into a two column arrangement. This would use some combination of padding with spaces, artificial new lines and padding within the new lines.

– user1837608
Jan 3 at 14:03

add a comment | 

0

Okay, I messed around with a match function to create an array of text, delimited by after the 5th space (to match about 50 characters of space - I know this ain't exact). The I loop through the array, adding a pad of 25 characters before joining each item in the array back to a string.

I used this bit of code to get the effect

var text = $("#orig").text();



var text2 = text.match(/(.*?s){1,5}/g);

var padded = text2[0]; // get first line



for (var i=1; i < text2.length; i++) {

    padded += "n".padEnd(25)+text2[i]; // pad subsequent lines





var line = "TITLE:".padEnd(25) + padded +

                    "nNEXT:".padEnd(25) + padded;



$("#new").val(line);

And get this output:

TITLE:                  Lorem ipsum dolor sit amet, 

                        consectetur adipiscing elit. Proin molestie 

                        leo vel odio vulputate, in 

                        tincidunt magna laoreet. Duis feugiat 

                        mi vel consequat finibus. Aenean 

                        eu tellus feugiat, rhoncus libero 

                        sed, condimentum felis.



NEXT:                   Lorem ipsum dolor sit amet, 

                        consectetur adipiscing elit. Proin molestie 

                        leo vel odio vulputate, in 

                        tincidunt magna laoreet. Duis feugiat 

                        mi vel consequat finibus. Aenean 

                        eu tellus feugiat, rhoncus libero 

                        sed, condimentum felis.

Now I wonder if someone can help me get this into a string prototype? That way it can be invoked when needed in different parts of the code?

share|improve this answer

answered Jan 3 at 16:00

user1837608user1837608

5481526

add a comment | 

0

Okay, I messed around with a match function to create an array of text, delimited by after the 5th space (to match about 50 characters of space - I know this ain't exact). The I loop through the array, adding a pad of 25 characters before joining each item in the array back to a string.

I used this bit of code to get the effect

var text = $("#orig").text();



var text2 = text.match(/(.*?s){1,5}/g);

var padded = text2[0]; // get first line



for (var i=1; i < text2.length; i++) {

    padded += "n".padEnd(25)+text2[i]; // pad subsequent lines





var line = "TITLE:".padEnd(25) + padded +

                    "nNEXT:".padEnd(25) + padded;



$("#new").val(line);

And get this output:

TITLE:                  Lorem ipsum dolor sit amet, 

                        consectetur adipiscing elit. Proin molestie 

                        leo vel odio vulputate, in 

                        tincidunt magna laoreet. Duis feugiat 

                        mi vel consequat finibus. Aenean 

                        eu tellus feugiat, rhoncus libero 

                        sed, condimentum felis.



NEXT:                   Lorem ipsum dolor sit amet, 

                        consectetur adipiscing elit. Proin molestie 

                        leo vel odio vulputate, in 

                        tincidunt magna laoreet. Duis feugiat 

                        mi vel consequat finibus. Aenean 

                        eu tellus feugiat, rhoncus libero 

                        sed, condimentum felis.

Now I wonder if someone can help me get this into a string prototype? That way it can be invoked when needed in different parts of the code?

share|improve this answer

answered Jan 3 at 16:00

user1837608user1837608

5481526

add a comment | 

0

0

0

Okay, I messed around with a match function to create an array of text, delimited by after the 5th space (to match about 50 characters of space - I know this ain't exact). The I loop through the array, adding a pad of 25 characters before joining each item in the array back to a string.

I used this bit of code to get the effect

var text = $("#orig").text();



var text2 = text.match(/(.*?s){1,5}/g);

var padded = text2[0]; // get first line



for (var i=1; i < text2.length; i++) {

    padded += "n".padEnd(25)+text2[i]; // pad subsequent lines





var line = "TITLE:".padEnd(25) + padded +

                    "nNEXT:".padEnd(25) + padded;



$("#new").val(line);

And get this output:

TITLE:                  Lorem ipsum dolor sit amet, 

                        consectetur adipiscing elit. Proin molestie 

                        leo vel odio vulputate, in 

                        tincidunt magna laoreet. Duis feugiat 

                        mi vel consequat finibus. Aenean 

                        eu tellus feugiat, rhoncus libero 

                        sed, condimentum felis.



NEXT:                   Lorem ipsum dolor sit amet, 

                        consectetur adipiscing elit. Proin molestie 

                        leo vel odio vulputate, in 

                        tincidunt magna laoreet. Duis feugiat 

                        mi vel consequat finibus. Aenean 

                        eu tellus feugiat, rhoncus libero 

                        sed, condimentum felis.

Now I wonder if someone can help me get this into a string prototype? That way it can be invoked when needed in different parts of the code?

share|improve this answer

answered Jan 3 at 16:00

user1837608user1837608

5481526

Okay, I messed around with a match function to create an array of text, delimited by after the 5th space (to match about 50 characters of space - I know this ain't exact). The I loop through the array, adding a pad of 25 characters before joining each item in the array back to a string.

I used this bit of code to get the effect

var text = $("#orig").text();



var text2 = text.match(/(.*?s){1,5}/g);

var padded = text2[0]; // get first line



for (var i=1; i < text2.length; i++) {

    padded += "n".padEnd(25)+text2[i]; // pad subsequent lines





var line = "TITLE:".padEnd(25) + padded +

                    "nNEXT:".padEnd(25) + padded;



$("#new").val(line);

And get this output:

TITLE:                  Lorem ipsum dolor sit amet, 

                        consectetur adipiscing elit. Proin molestie 

                        leo vel odio vulputate, in 

                        tincidunt magna laoreet. Duis feugiat 

                        mi vel consequat finibus. Aenean 

                        eu tellus feugiat, rhoncus libero 

                        sed, condimentum felis.



NEXT:                   Lorem ipsum dolor sit amet, 

                        consectetur adipiscing elit. Proin molestie 

                        leo vel odio vulputate, in 

                        tincidunt magna laoreet. Duis feugiat 

                        mi vel consequat finibus. Aenean 

                        eu tellus feugiat, rhoncus libero 

                        sed, condimentum felis.

Now I wonder if someone can help me get this into a string prototype? That way it can be invoked when needed in different parts of the code?

share|improve this answer

answered Jan 3 at 16:00

user1837608user1837608

5481526

share|improve this answer

share|improve this answer

answered Jan 3 at 16:00

user1837608user1837608

5481526

answered Jan 3 at 16:00

user1837608user1837608

5481526

answered Jan 3 at 16:00

user1837608user1837608

5481526

5481526

add a comment | 

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015820%2fformat-plaintext-string-into-two-columns-that-are-aligned%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here