Nakib
tengo un name etiqueta en la barra lateral que debe mostrar una sola línea y truncar si el texto largo sigue por puntos triples (lorem ipsum…) y debe mostrar el texto completo al pasar el mouse.
Puedo lograr esto usando css, pero mi problema es que cuando se muestra el texto completo, se superpone al texto debajo. (Imágenes adjuntas)
HTML
<p class="name">
Lorem ipsum lorem ipsum lorem ipsum
</p>
CSS
.name{
color: #0079c1;
height: 2em;
line-height: 1em;
font-size: 20px;
font-weight: 400;
text-overflow: ellipsis;
margin-bottom: 12px;
cursor: pointer;
word-break: break-all;
overflow:hidden;
white-space: nowrap;
}
.name:hover{
overflow: visible;
white-space: normal;
}
Aquí hay un JSFiddle
Texto superpuesto al pasar el mouse. El comportamiento esperado es que debe empujar el contenido debajo de él.
solo puedes agregar height:auto hacia hover estado y funcionará bien:
.name{
width:120px;
color: #0079c1;
height: 2em;
line-height: 1em;
font-size: 20px;
font-weight: 400;
text-overflow: ellipsis;
margin-bottom: 12px;
cursor: pointer;
word-break: break-all;
overflow:hidden;
white-space: nowrap;
}
.name:hover{
overflow: visible;
white-space: normal;
height:auto; /* just added this line */
}<p class="name">
Lorem ipsum lorem ipsum lorem ipsum ipsum lorem ipsum
</p>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptate deserunt consequatur velit, alias ullam fuga aspernatur, ut doloremque eos fugiat quo a accusamus minus distinctio quasi, recusandae excepturi molestiae.
</span>Al enfrentar un problema similar con algunas direcciones de correo electrónico largas en un formulario, creé esta solución donde el contenido completo se muestra al pasar el mouse en un pseudo elemento de estilo de información sobre herramientas.
body{
background:#eee;
}
.box{
background:#fff;
box-shadow: 0 25px 30px 0 rgba(0,0,0,0.15);
border:rgba(0,0,0,0.3);
width:10rem;
margin:2rem auto;
padding:2rem;
}
.ellipsis {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all .2s linear;
white-space: nowrap;
padding:.5rem 1rem;
}
.ellipsis:focus, .ellipsis:hover {
color:transparent;
}
.ellipsis:focus:after,.ellipsis:hover:after{
content:attr(data-text);
overflow: visible;
text-overflow: inherit;
background: #fff;
position: absolute;
left:auto;
top:auto;
width: auto;
max-width: 20rem;
border: 1px solid #eaebec;
padding: 0 .5rem;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.28);
white-space: normal;
word-wrap: break-word;
display:block;
color:black;
margin-top:-1.25rem;
}<div class="box">
<p class="ellipsis" data-text="f6cd8edc-60c2-11e7-9919-ef706e78474f">f6cd8edc-60c2-11e7-9919-ef706e78474f</p>
<p class="ellipsis" data-text="Mauris ac eros odio. Etiam imperdiet vitae dolor eu feugiat. Pellentesque at ante dignissim, tincidunt ipsum quis, rutrum ante. Donec ac lorem nisl. Cras fringilla ex ut rutrum imperdiet. Fusce accumsan id est vel lacinia. Cras nec ligula eu velit mattis mollis. Nunc venenatis neque nibh, id dapibus orci aliquet id. Ut dictum mollis eros sed imperdiet. Phasellus quis enim nec felis sagittis varius. Ut et rutrum quam. Morbi id interdum felis. Mauris id dignissim odio.">Mauris ac eros odio. Etiam imperdiet vitae dolor eu feugiat. Pellentesque at ante dignissim, tincidunt ipsum quis, rutrum ante. Donec ac lorem nisl. Cras fringilla ex ut rutrum imperdiet. Fusce accumsan id est vel lacinia. Cras nec ligula eu velit mattis mollis. Nunc venenatis neque nibh, id dapibus orci aliquet id. Ut dictum mollis eros sed imperdiet. Phasellus quis enim nec felis sagittis varius. Ut et rutrum quam. Morbi id interdum felis. Mauris id dignissim odio.</p>
</div>https://codepen.io/natalitique/pen/gRdmre
Requiere usar el atributo de datos con el contenido completo.
-
Agradable. ¿Alguna forma de no necesitar el texto de datos duplicado? Parece redundante… ¿se puede usar algo como innerHtml?
– jjxtra
18 de julio de 2018 a las 22:10
-
Tenga en cuenta que esta solución no parece permitir que el usuario resalte el texto completo para copiar y pegar. @Mi-Creativity answer proporciona esa funcionalidad.
– Pulsando Siempre
2 dic 2019 a las 20:34
Crea un violín en jsfiddle.net
– AMACB
17 de enero de 2016 a las 0:38
@AMACB jsfiddle.net/y25okb8L
– Nakib
17 de enero de 2016 a las 0:41