-2

How to vertical align single or multiple line ?

I need for ellipsis, because in some situations i want to show only one line, and sometimes two lines.

this is my code so far:

html, body, p {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.ellipsis {
    height: 100px;
    border: 5px solid #AAA;
}

.blah {
    overflow: hidden;
    height: 1.2em;
   line-height: 1.2em;
   display: block;

}
.blah:before {
    content:"";
    float: left;
    width: 5px;
    height: 3.6em;
}
.blah > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px;
}

live example: http://jsfiddle.net/0dqef9da/274/

bundy
  • 1
  • 1
  • 4
  • Possible duplicate of [css ellipsis on second line](http://stackoverflow.com/questions/5269713/css-ellipsis-on-second-line) – Troyer May 10 '17 at 12:15
  • this is not my question... my question is How to vertical align single or multiple line – bundy May 10 '17 at 12:18
  • 1
    Your problem statement is ambiguous. "[...] in some situations i want to show only one line, and sometimes two lines". In what situations *exactly*? – André Dion May 10 '17 at 12:26
  • Possible duplicate of [Vertically align text in a div](http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div) – André Dion May 10 '17 at 12:29
  • for some titles i will use height: 1.2em; line-height: 1.2em; and for some other titles will write: height: 2.4em; line-height: 1.2em; – bundy May 10 '17 at 12:29

2 Answers2

-2

You should use word-break:break-all in you text css style attribute

RBT
  • 24,161
  • 21
  • 159
  • 240
CodingFriend
  • 149
  • 1
  • 12
-2

Vertical align center you use simply text-align: center; and if you want to use ellipsis

<!DOCTYPE html>
<html>
<head>
<style> 
#div1 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: clip; 
    border: 1px solid #000000;
}

#div2 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}

</style>
</head>
<body>

<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>

<p>This div uses "text-overflow:clip":</p>
<div id="div1">This is some long text that will not fit in the box</div>

<p>This div uses "text-overflow:ellipsis":</p>
<div id="div2">This is some long text that will not fit in the box</div>

</body>
</html>

please follow the link: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

In ellipsis you need also div width.. Please check the above code

Kiran Raj R
  • 150
  • 7