Tengo un problema con el párrafo, me gustaría que se adapte al tamaño de su div padre tal como lo hace, el problema es que cuando redimensiono las letras se cortan por la mitad. lo que quiero conseguir es que cuando no entre mas texto no se vea, no que se vea la ultima linea cortada por la mitad, como actualmente me esta ocurriendo, os dejo aquí el código
*{
margin: 0px;
padding: 0px;
}
body{
background-color: lightblue;
}
article{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: relative;
width: 60%;
height: 150px;
background-color: crimson;
margin: 0 auto;
margin-top: 150px;
}
div.contenido_evento{
display: inline-block;
position: relative;
width: 100%;
height: 150px;
background-color: lightgreen;
overflow: hidden;
}
div.contenido_evento > h2{
display: block;
position: relative;
width: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
background-color: crimson;
}
div.contenido_evento > p{
font-size: 1.25em;
}
<body>
<article>
<div class="contenido_evento">
<h2>TITULO EVENTO</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean metus augue, auctor id consectetur ut, pellentesque et nunc. Donec vehicula justo at mauris rhoncus viverra. Morbi eget semper ante, et euismod diam.
</p>
</div>
</article>
overflow
, o mostrar de todas maneras el texto?