user3956534
user3956534

Reputation: 83

text not showing how it should be in html

I have a piece of text that looks like this:

<p> We recently reduced the number of savings accounts we offer. I welcomed this because I think
 members find it confusing to look through tables of lots of slightly different accounts, all 
with advantages and disadvantages. I think it affects their trust in us. But I don’t understand 
why we haven’t applied this to children’s accounts of all things. Since children don’t pay tax, 
why do they need an ISA as well as a children’s savings account? Children (and their parents) 
are the last people we want to confuse as they could be customers for life. And why is our 
children’s savings account called the ‘Smart Limited Access’? It doesn’t strike me as being very 
self-explanatory or child friendly. How about just ‘Nationwide Young Saver Account’?

I’d be grateful if you could clear this up for me.

Best regards,

Vanessa</p>

However when it is put into html it ignores this layout and has it has one line. How can I keep it as its orginal text

Upvotes: 0

Views: 59

Answers (5)

gr3g
gr3g

Reputation: 2914

Your HTML file:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" /> 
        <meta name="description" 
              content="" />
        <title></title>
        <link rel="stylesheet" href="style.css" />
        <link rel="icon" type="image/png" href="" />
    </head>


 <body>

  <div id="yourText">
     Say something here
  </div>

 </body>
 </html>

Create a file called style.css in the same folder.
Insert this:

#yourText
{
width: 400px;
border: 1px solid black;
}

You will have to set <br /> afther each end of sentence and adjust the width (400).
Delete the border, it's just so you can understand how it works

Upvotes: 0

Jonson
Jonson

Reputation: 171

<p> We recently reduced the number of savings accounts we offer. I welcomed this because I think
 members find it confusing to look through tables of lots of slightly different accounts, all 
with advantages and disadvantages. I think it affects their trust in us. But I don’t understand 
why we haven’t applied this to children’s accounts of all things. Since children don’t pay tax, 
why do they need an ISA as well as a children’s savings account? Children (and their parents) 
are the last people we want to confuse as they could be customers for life. And why is our 
children’s savings account called the ‘Smart Limited Access’? It doesn’t strike me as being very 
self-explanatory or child friendly. How about just ‘Nationwide Young Saver Account’?</p>

<p>I’d be grateful if you could clear this up for me.</p>

<p>Best regards,<br>

Vanessa</p>

Upvotes: 0

pewpewlasers
pewpewlasers

Reputation: 3215

A clean way would be to set css property of the p tag

<p class="makeItLookTheSame"> We recently reduced the number of savings accounts we offer. I welcomed this because I think
 members find it confusing to look through tables of lots of slightly different accounts, all 
with advantages and disadvantages. I think it affects their trust in us. But I don’t understand 
why we haven’t applied this to children’s accounts of all things. Since children don’t pay tax, 
why do they need an ISA as well as a children’s savings account? Children (and their parents) 
are the last people we want to confuse as they could be customers for life. And why is our 
children’s savings account called the ‘Smart Limited Access’? It doesn’t strike me as being very 
self-explanatory or child friendly. How about just ‘Nationwide Young Saver Account’?

I’d be grateful if you could clear this up for me.

Best regards,

Vanessa</p>

And so in your css file:

.makeItLookTheSame{
    white-space: pre-wrap;
    word-wrap: break-word;
}

Upvotes: 0

blue112
blue112

Reputation: 56432

Use <pre> thats instead of <p> tags to keep the formating the same.

<pre>Now
Line endings
Are conserved !</pre>

Upvotes: 3

Dakotah Hicock
Dakotah Hicock

Reputation: 390

Put each line in separate <p> tags.

<p>We recently reduced ... 'Nationwide Young Saver Account'?</p>
<p>I'd be grateful if you could clear this up for me</p>
<p>Best regards,</p>
<p>Vanessa</p>

Upvotes: 0

Related Questions