Whitespacing in html, anyway to display it as such - html

I have a good amount of content that stores their data in a database with plenty of whitespace, which shows how they want it to display on page. Stackoverflow can change it up with the code tag. (the second way is how it looks in the database, and how they want it to display, the first way is how it currently is display) Is there anything I can do with the existing html?
step 1
step 2
step 3
step 4
step 1
step 2
step 3
step 4
Edit: Hoping not to use the pre tag. Maybe taking my Model (lets say Model.MyHtml) and applying something to check for whitespace, but I am not sure how...

<pre>
step 1
step 2
step 3
step 4
</pre>
Try this fiddle http://jsfiddle.net/sameerast/tvxU9/

I think I found a way to preserver the whitespace and keep the style. good ol' css (i had forgotten about this)
white-space: pre-wrap;
or pre-line works if you don't want tabs

Related

Confused about HTML Layout approach

Newbie Alert! I'm asking this question, because management is in a hurry! They want seven pages done by yesterday. So I need some advice, quickly.
I have requirements to create a div that looks similar to the following picture:
This question is about Layout. I'm using the standard HTML dropdowns.
First: I started off by using 1 row with 4 columns. But then I found it difficult to align my labels (black squares on the left) with the dropdowns.
Second: Then I thought maybe I should create 7 rows, each with 4 columns, so I could better align the contents of each row.
Third: But given that I have to add the Help "?" button with the text, I started wondering if I should use an in-line-block. Also, by this time, I think I may be making the code more complicated than it needs to be.
So, what I am asking is:
What is the simplest and (or) most effective method to create a layout like this?
Perhaps, I need only 2 columns; one for the labels, Help buttons, and dropdowns, and the second column for the text boxes. My idea is that if I'm trying too hard, I'm probably doing it wrong! How would you do this?
Thanks for suggestions.

entering a new sentence without using <br> or <p>

If there are a number of links on a webpage, is it possible to break onto a new line while the link is either fully on either side?
For example: This blog http://northskie.blogspot.com/ shows a series of links using the standard A HREF="http://www... " etc .
But, you'll notice that on the first line, Chapin's Inferno appears on BOTH sentence line A, AND line B. This could easily be corrected by adding a BR, of course. BUT, what if I'm working on a huge number of links, such as http://asmrluv.blogspot.com/ ? Now, I'd prefer NOT to to simply add BR or P between each Breaking line. Also note, many sites could be added to the list later. This is why BR lines should be avoided here.
Can any code be implemented which automatically prevents a link from appearing on both lines? (of course, adding a CLASS or ID would along with code would be acceptable). I'm trying to avoid the problem of a link appearing halfway on one sentence, then on the next line as well.

Combining Multi-Line text columns together in Sublime Text

Lets say I have 2 columns with a billion lines in each here's how they begin:
Column 1
I said
She said
it said
Column 2
you're amazing
he's awesome
enough already
I've tried highlighting column 1 and splitting it into lines CTRL+L but then how would I combine column 2's lines to each of colum 1's lines properly to make 1 legible column?
I'm not 100% sure that I understand what you want to do but if I do then...
Use multiple selections like this:
Hope this helps and is in fact what you want to do. :)

Close tags dropping below highlighted line

I have minimal experience with HTML script so this may all go horribly wrong here.
Alright so I have a very simple yet very time consuming task of taking complete papers and converting them into HTML script. I'm using Sublime Text 3 with Emmet plugin.
Basically,
This is the first header
This is the first paragraph that needs to be tagged
This is the second header
This is the second paragraph that needs to be tagged
So super simple I need to put header tags on the headers and paragraph tags on the paragraphs.
What I have been doing is holding Ctrl and manually highlighting the desired text as it is all rather random. Problem is that takes forever to manually highlight the text like that.
I am aware of other ways to highlight such as Ctrl + L for the line. Problem is my close tags end up under the highlighted line.
Example:
<h2>This is the first header
</h2><p>This is the first paragraph that needs to be tagged
</p>
It's not a big deal but it makes the code harder to go through later and really chaotic.
The same problem persists if I click the corresponding number of the line.
Seeing as I have hundreds of pages to enter and even more headers, paragraphs, and pictures to properly tag; I'm looking for a solution to the tag dropping below the line or a faster method to entering text.
So, is there a fast method for entering text from a word document to Sublime text and quickly get the corresponding tags? e.g. <h2>,<h3>,<p>,<ul>,<li> and so on.
Any help will save my sanity, thanks.
When you select a line with CtrlL, it automatically selects the entire line, and moves the cursor down to the first position on the following line. There are two ways around this. The first is to place the cursor in the first position on the line you want to select, then just hit ShiftEnd and the line will be selected, with the cursor now sitting in the last position on that same line. Alternatively, use CtrlL, then hit Shift← (left arrow) to move the cursor from the first position on the next line to the last position on the selected line. Either way, you can now hit the key combo in Emmet for inserting a tag pair, and you're all set.

Adding Whitespace in Middle of Sentence

In HTML5, how do you skip 5 spaces in a <div>? For example, how do you do this:
"Drumroll... [5 spaces] Something!"
<div>Drumroll... [5 spaces] Something!</div> just outputs "Drumroll... Something!"
There does not seem to be any tags such as <indent> that I have found to indent in the middle of a sentence.
&nbsp&nbsp&nbsp&nbsp&nbsp works, but is there a more efficient way? Such as...
<skip 10px></skip>
Specifically, I am looking for the solution to insert exactly 1,000 spaces easily, for example.
This is not perfectly five spaces, and I'm not sure if there's a way to do it without using five consecutive s, but this will allow you to add a specifiable amount of space inline.
<p>Drumroll...<span style="margin-left:50px;"></span>something</p>
http://jsfiddle.net/5drHj/1/
Another option might be to use the <pre> tag...
<pre>Drumroll... something</pre>
http://jsfiddle.net/5drHj/2/
If you do decide to use consecutive you could use a javascript loop (or php loop for server side construction) to add the 1000 s
Edit: At the risk of losing my tick, I'd like to point out that the answer given by #vals is a third option, and perhaps the most elegant of the three.
No, there is no such element in HTML. Long ago, there was the nonstandard <spacer> tag, but it was abandoned. You are supposed to use CSS for things like this. Wrap some preceding text in a <span> element and set padding-left: 1.25em on it. Tune the value as needed. The width of a space depends on font but is on the average around 0.25em.
The question that you pose in the first half of the question (How to insert spaces easily), is achieved with the property:
white-space: pre;
It means that your text is pre-formatted, and the white spaces should stay as they are. Then just insert those spaces.
fiddle
If you want to insert 1000 spaces, then we are talking probably about alignment, and there is a huge amount of posibilities. (padding specified in em being the most obvious), but you should then give more details of your situation.