CSS Layout Help - Multiline Address

CSS layout help - Multiline address

hey try to use this use this

.address
{
white-space:pre;
text-align:right;
}

css div center multi-line text vertically and horizontally with a background image

You have some unnecessary css such as margin: -257px 0 0 -500px; left:50%; top:50%; width: 1000px; height: 515px; on .innie , which is throwing off your center alignment.

I think this, what you are going for.

UPDATED

CSS

.title {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 400%;
}

.subtitle {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 150%;
}

.subnote {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 75%;
}

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
    background:url('https://placeimg.com/600/300/any')no-repeat;
    background-position: center;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.innie {
    text-align: center;
}

jsFiddle Demo - https://jsfiddle.net/8dphnor5/

How to specify line breaks in a multi-line flexbox layout?

The simplest and most reliable solution is inserting flex items at the right places. If they are wide enough (width: 100%), they will force a line break.

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(4n - 1) {
  background: silver;
}
.line-break {
  width: 100%;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="line-break"></div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="line-break"></div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="line-break"></div>
  <div class="item">10</div>
</div>

How to align multiline selection in HTML?

That’s a good project!

For fine-tuned styling you need to get rid of all the s. Then add an element <style></style> somewhere in your HTML file. (Usually styles go inside <head>, but another position will do as well.)

Inside the style element you can use CSS to address your HTML elements.

Try starting with the following lines:

label {
  display: inline-block;
  width: 200px;
  text-align: right;
  margin-right: 10px;
}

This will advise the browser to make all <label> elements 200px wide and align the text to the right, with 10px space to the following elements.

How to make text inside a div multiline?

word-wrap: break-word; will solve the problem.

Wrap a text within only two lines inside div

Limiting output to two lines of text is possible with CSS, if you set the line-height and height of the element, and set overflow:hidden;:

#someDiv {
    line-height: 1.5em;
    height: 3em;       /* height is 2x line-height, so two lines will display */
    overflow: hidden;  /* prevents extra lines from being visible */
}

--- jsFiddle DEMO ---

Alternatively, you can use the CSS text-overflow and white-space properties to add ellipses, but this only appears to work for a single line.

#someDiv {
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

And a demo:

--- jsFiddle DEMO ---

Achieving both multiple lines of text and ellipses appears to be the realm of javascript.

Aligning Multi-line text and images within a table header cell

This pretty much seems like it can't be done - we can get close, but each solution to get it all working together breaks something else. Thanks for the suggestions

How do I implement a multi-line flexbox?

The flex box spec has changed in the last few months and you are using the old syntax. The new spec I believe is only currently implemented only in Chrome Canary and to some extent in latest chrome. (It's a little buggy) box-lines multiple is gone so to achieve this vertical layout there are a few ways. Using -webkit-flex-direction:column; so

<div id="flexbox">
    <div class="box">DIV 1</div>
    <div class="box">DIV 2</div>
    <div class="box">DIV 3</div>
</div>

and css :

#flexbox {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    width: 500px;
    height: auto;
    min-height: 200px;
}

#flexbox .box {
    -webkit-flex: 1;

}

Using wrapping:

-webkit-flex-wrap: wrap;

and setting your direction to:

-webkit-flex-direction: row;

<div id="flexbox">
    <div class="box">DIV 1</div>
    <div class="box">DIV 2</div>
    <div class="box">DIV 3</div>
    <div class="box">DIV 4</div>
    <div class="box bigger">DIV 5</div>
    <div class="box">DIV 6</div>
</div>

#flexbox {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    width: 500px;
    height: auto;
    min-height: 200px;
    }

#flexbox .box {

    -webkit-flex: 130px 1;

    }

#flexbox .box.bigger {

    -webkit-flex: 330px 1;

    }

There's a whole bunch of examples on the spec page linked above.

CSS Layout Help - Multiline Address