-1

How can I align the text vertically? If it were always a line I could just set the height of the line to the height of the container.

Important detail and that the text needs to be limited, as shown in the image that is attached to this post.

I need to do this using pure CSS.

.block-text-multiple {
    text-overflow: clip;
    overflow: hidden;
}

enter image description here

Rick
  • 73
  • 1
  • 10

2 Answers2

1

you can do this 

    <div class="t">
      <div class="c"> tefas dfas dlorem  Lorem ipsum dolor sit amet, 
consectetur adipisicing elit.t</div>
    </div>

and css 

.t{
  display: table;
}
.c{
  display: table-cell;
  vertical-align:middle;
  height: 500px;
  background-color: red;
  padding: 10px;

}
ashish singh
  • 6,526
  • 2
  • 15
  • 35
0

body {
  background: #131418;
  color: #999;
  text-align: center
}
.container {
  border: 1px solid #999;
  height: 70px
}
.content {
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 150px; /* change the limit here */
}
<body>
  <div class="container">
    <div class="content">
      example with one line
    </div>
  </div>
  <br>
  <div class="container">
    <div class="content">
      example with two lines
      <br>example with two lines
    </div>
  </div>
</body>
  • Thanks, this example when the text exceeds the predetermined limit it still continues to display ... ie the text that exceeds the limit is not hidden – Rick Dec 11 '16 at 19:34
  • what is the limit? I added a limit on how wide the content can in an update to the answer above, see if that works. –  Dec 11 '16 at 19:47
  • This code worked in the browser, but when I need to run through HiQPDF (http://www.hiqpdf.com/), it simply does not interpret the code: transform: translateY (-50%); – Rick Dec 11 '16 at 20:11