Mostrar la primera línea de un párrafo

Tengo un DIV con un párrafo de varias líneas.Mostrar la primera línea de un párrafo

¿Hay alguna manera (tal vez usando jQuery) para mostrar solo la primera línea del párrafo y ocultar los demás?

2010-10-19 Victor

jQuery trabaja sobre los elementos DOM/directos. un párrafo es un elemento. líneas es un párrafo no es. así que no creo que esto sea posible. – RPM1984

relacionado http://stackoverflow.com/a/22811590/759452 –

~~No hay una forma directa de hacerlo especificando la primera línea.~~ Sugeriría cambiar la altura del DIV usando CSS para mostrar solo la primera línea. Me parece que es la solución más simple. Si luego desea cambiar para mostrar toda la línea con javascript, simplemente úselo para cambiar el alto de DIV al 100%.

EDIT: Soy corregido, no sabía que había una pseudoclase de primera línea. Sin embargo, cambiar la altura puede ser la forma más simple.

Fuente

2010-10-19 02:22:20

tampoco lo sabía. – RPM1984

Gracias Ben - ¡funcionó! – Victor

@Victor P ¡Me alegro de ayudar! –

Aquí es una manera (más o menos), haciendo que el punto blanco sobre blanco, excepto el: primera línea de la misma: http://jsbin.com/usora4/2/edit

de fragmentos de CSS:

p { color: white; } 
p:first-line { color: black; }

Fuente

2010-10-19 02:22:59

Sí, esto funcionaría, aparte del espacio. el p no se auto-dimensionará, porque los contenidos todavía están allí. entonces está ocultando el texto, pero no la 'línea' real (donde 'línea' se refiere a un bloque de espacio en un párrafo). aún, +1. :) – RPM1984

Buena, idea simple. Pero todavía usa el mismo espacio que el párrafo completo. – Victor

determinar la altura de su línea y establecer la altura del div de manera que solo se muestre una línea, y establecer el atributo overflow del div en hidden.

Fuente

2010-10-19 02:31:13 Chadwick

-1

No lo he intentado, pero debería poder hacerlo un poco mejor usando la visibilidad, p.

<div class="excerpt"> 
    This is my text. It has many lines. This is my text. 
    It has many lines. This is my text. It has many lines. 
    This is my text. It has many lines. This is my text. 
    It has many lines. 
</div>

y luego la creación de un estilo

div.excerpt { visibility: hidden; } 
div.excerpt:first-line { visibility: visible; }

Fuente

2010-10-19 02:32:57

No funciona. Intenté tanto la visibilidad como la visualización y no pude hacer que funcionara. Curiosamente, funcionó para el color. Pero de nuevo solo funcionó cuando cambié de div a p, e introduje un
entre las líneas ... –

ha sido un rato ya que este fue respondida, pero dado que no hay ejemplo de ello es que funciona bastante bien:

<div style="width:200px"> 
<div> 
    This is above the paragraph. 
</div> 
<div class="excerpt"> 
    This is my text. It has many lines. This is my text. 
    It has many lines.This is my text. It has many lines. 
    This is my text. It has many lines. This is my text. 
    It has many lines. 
</div> 
<div> 
    This is below the paragraph. 
</div> 
</div> 


<style type="text/css"> 
div.excerpt { height:2.2em; overflow:hidden; } 
div.excerpt:hover { height:auto; } 
</style>

http://jsfiddle.net/h82313am/

Fuente

2011-02-28 22:40:35

No es necesario JavaScript, la medición de la altura o el cambio de visibilidad. Simplemente configure el párrafo para mostrar en línea y no para envolver su texto. Deberá establecer el desbordamiento en el div principal en "oculto" para que las líneas restantes en el párrafo no se derramen.

#wrap { 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
p { 
    display: inline; 
    white-space: nowrap; 
}

http://jsfiddle.net/VvdBs/

Fuente

2012-12-08 03:55:46

Simplemente añadiendo esto aquí como una idea. Le permite mostrar y ocultar el texto con un cuadro de texto. CSS solo

p.bar { font-size:0; margin:0;padding:10px;background: #ddd; -webkit-transition: font-size .25s;transition: font-size .25s; 
 
} 
 
p.bar:first-line { font-size:20px; } 
 
input:checked + label + p.bar {font-size: 20px;}

<input id="foo" type="checkbox"><label for="foo">show</label><p class="bar">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
 

 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

Fuente

2017-03-24 02:20:53 superUntitled

Mostrar la primera línea de un párrafo

Respuesta

Cuestiones relacionadas