CSS - как сделать контент подходящим для ширины/высоты абзаца?

Question

У меня есть абзац в HTML с использованием тега p. Теперь я хочу изменить высоту и ширину этого абзаца, чтобы он показывал начало (глава) абзаца, а затем, когда я наводил на него курсор, он отображает полный абзац. Как это сделать с помощью CSS?

NOTE ** Я НЕ МОГУ ИЗМЕНИТЬ HTML код так, я ДОЛЖЕН ТОЛЬКО поиграться с CSS ..

Answer 1

Следующая базовый код будет работать для вас, вы можете изменить его, чтобы включить CSS-анимации и т.д. по мере необходимости.

p { 
    // Put whatever height you want here, we're using max-height here so that 
    // paragraphs that are smaller than this don't get extra blank spacing. 
    max-height: 20px; 

    // Hide the extra content 
    overflow: hidden; 
} 

p:hover { 
    max-height: none; 
} 

Answer 2

Это лучше, если вы используете JavaScript для таких вещей, но если вы настаиваете на CSS, здесь вы идете.

p{ 
    border: solid; 
    height: 10px; 
    overflow:hidden; 
} 
p:hover{ 
    height: 100%; 
} 

Небольшой пример here