Текст дизайн выравнивание с elipsis использованием HTML и CSS

Question

Example Link

Есть два сценария (Примечание: То же, Html и CSS должны работать для обоих сценария)

1) Когда я меньше текста, то, что текст имеет чтобы вписаться в середину div с отзывчивым.

2) когда у меня есть большой текст, который должен начинаться с начала div и эллипсиса для третьей строки, но должен быть отзывчивым.

Answer 1

Попробуйте это:

display: block; 
    /* Fallback for non-webkit */ 
    display: -webkit-box; 
    text-align: center; 
    max-width: 400px; 
    height: 109.2px; 
    /* Fallback for non-webkit */ 
    margin: 0 auto; 
    font-size: 26px; 
    line-height: 1.4; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    text-overflow: ellipsis; 

Ref: http://codepen.io/martinwolf/pen/qlFdp