Pokaż pierwszą linię akapitu

Question

Mam DIV z wieloliniowym akapitem.

Czy istnieje sposób (może za pomocą jQuery), aby wyświetlić tylko pierwszy wiersz akapitu i ukryć inne?

Answer 1

Nie ma na to sposobu, określając pierwszy wiersz. Proponuję zmienić wysokość DIV za pomocą CSS, aby pokazać tylko pierwszą linię. Wydaje mi się, że to najprostsze rozwiązanie. Jeśli chcesz zmienić, aby wyświetlić całą linię za pomocą javascript, użyj go, aby zmienić wysokość DIV z powrotem na 100%.

EDIT: Poprawiłem się, nie wiedziałem, że istnieje pseudo-klasa pierwszej linii. Jednak zmiana wysokości może nadal być najprostszym sposobem.

Answer 2

Oto sposób (w pewnym sensie), dokonując paragraf białe na białym z wyjątkiem: first-line IT: http://jsbin.com/usora4/2/edit

fragment CSS:

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

Answer 3

określić wysokość linię i ustaw wysokość div tak, aby pokazywała się tylko jedna linia i ustaw atrybut div na overflow na hidden.

Answer 4

Nie próbowałem go, ale powinieneś być w stanie zrobić trochę lepiej przy użyciu widoczności, np.

<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> 

a następnie utworzenie stylu

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

Answer 5

został chwilę ponieważ było to odpowiedział, ale widząc brak jest przykładem jest tu taki, który działa całkiem dobrze:

<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/

Answer 6

Nie wymaga JavaScript, wysokości pomiaru ani zmiany widoczności. Wystarczy ustawić akapit, aby wyświetlał tekst, a nie zawijać tekstu. Będziesz chciał ustawić przepełnienie na div jednostki nadrzędnej na "ukryty", aby pozostałe linie w akapicie nie rozlały się.

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

http://jsfiddle.net/VvdBs/

Answer 7

Wystarczy dodać ten tutaj jako idea. Pozwala pokazać i ukryć tekst za pomocą pola tekstowego. Tylko CSS.

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>