how to display data in html - html

Question

In my project, I am retrieving an address from the database and displaying this address on page. The issue or problem that I am facing is the the way the retrieved address is being displayed.
Basically this is the way the address is being displayed:
Address: 1 Kings Street Kilmarnock East Berkshire Scotland KA1 UIT
I would like the address to be displayed like so:
Address: 1 Kings Street
Kilmarnock
East Berkshire
Scotland
KA1 UIT
How can I do this in HTML or css? I am currently using twitter bootstrap , and I don't if there is anyway to do using it.

Answer 1

Oh.. It's hard but let me try... ;)
<div>Address: 1 Kings Street<br> Kilmarnock <br>East Berkshire<br> Scotland <br>KA1 UIT</div>
Your Expected Output:
Address: 1 Kings Street
Kilmarnock
East Berkshire
Scotland
KA1 UIT
Working Demo
Note: This is just simplest and basic way.. But if Data is coming from any database dynamically then at-least you should explain in details from where it comes and by which object it can be accessible.. Then you can apply JS or regex functions... I hope you understand what I mean..

Answer 2

If you edited the data in your database, and used a comma between each line, you might be able to split the data. (your question doesn't state what language you are writing in (mvc/how data is being received).
However, once you have the string, you can use the String.split method (available in most languages), and hence could adapt your view accordingly.
So,
Address: 1 Kings Street, Kilmarnock, East Berkshire, Scotland, KA1 UIT
would become
{1 Kings Street}{ Kilmarnock}{ East Berkshire}{ Scotland}{ KA1 UIT}
which you could then do a foreach block, displaying them onto the screen as you requested
A possible alternative (although probably not easy), would be to extract the postcode, and call a google maps API call to receive the address - but again, this would be quite difficult.
At present, I cannot see how you would be able to expect a program to decide where to split the address into separate lines (unless you place them into different fields which was described in the comments).

Answer 3

You can add <p> to each line, or put <br> at the end of each lines.
But
If your retrieving the data from a database through a php variable you cannot do that with pure html / css, you'll need string manipulation with PHP.