2010-08-29 12 views
7

Powiedzmy okno moja przeglądarka jest 105 pikseli wysokości i pokażę blok tekstu, gdzie każda linia tekstu jest 10 pikseli wysokości - przeglądarka pokaże mi 10 i 1/2 linie w oknie (tzn. Dolna linia zostanie obcięta pionowo).Przeglądarka HTML z Clipping Prevent & Text Pokazuje pół wiersza tekstu

Czy jest jakiś sposób, aby temu zapobiec i zobaczyć tylko 10 linii?

Powodem chcę to zrobić, że używam widżet HTML (UIWebView), aby uczynić książkę, która będzie wyświetlana w paradygmacie strona Rzut.

uwaga: To wygląda @Page zasady mają pomóc mi osiągnąć ten cel, ale wydają się one jedynie do zastosowania podczas drukowania na drukarce.

+2

Mogę się mylić, ale co cię powstrzymuje po prostu owijając całość w "div", z ustaloną wysokością zaokrągloną do ostatniej linii i dając mu "przelew: ukryty"? –

+0

Możesz użyć JavaScript, aby uzyskać wysokość widoku, a następnie obliczyć i ustawić wymaganą wysokość linii. Nie jestem świadomy rozwiązania przy użyciu tylko CSS. –

+0

Czy możesz skrócić linię w CSS, aby każda linia była krótsza? – markus

Odpowiedz

0

Zgaduję, że nie wiem, ile linie idziesz do wyświetlania, gdy przyjdziesz do wyświetlania ich w oknie/przydzielonej przestrzeni. Chcesz również, aby wszystkie linie, które nie są widoczne w całości, zostały umieszczone na następnej stronie?

Jestem pewien, że to nie jest osiągalny w czystym CSS, ale będzie to prawdopodobnie możliwe przy użyciu jQuery oraz off-stronicowy ukrytej DIV. Zasadniczo ustaw ukryty DIV na pożądaną szerokość, wypełnij i sprawdź wysokość za pomocą jQuery. Jeśli jest zbyt wysoki, obetnij tekst i spróbuj ponownie.

0

Można użyć meta tag

 
<head> 
<meta name=viewport content="user-scalable=no,width=device-width,height=100px" /> 
</head> 

Albo można umieścić tekst w stylizowanej znacznika div, który wygląda tak:

 
<div style="height:100px;text-overflow:hidden;overflow:ellipsis"> 
text.... 
</head> 

W sumie trzeba jakąś ważną JavaScript jeśli chciał, aby tekst przewijania lub zobaczyć resztę zawartości

2

roztwory wymienione do tej pory wydaje się wszystko zostawić tekst odciąć pół drogi. Przy pomocy zaawansowanego JavaScriptu możesz sprawić, aby przeglądarka znalazła miejsce, w którym można przykleić elipsy i skrócić tekst. Będzie to wyglądało zgrabnie kosztem zaskakująco trudnego do zaprogramowania. Omówiliśmy to szczegółowo pod numerem this post.

Jeśli można użyć jQuery, można wykonać go z mojej funkcji jQuery tam wygląda następująco:

<div id="my_div"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Etiam vitae lorem eu ipsum fringilla rhoncus. 
</div> 
<script> 
    $("#my_div").truncateToHeight($("#my_div").text(), 105); 
</script> 
0

Można chyba zrobić z CSS3 wielokolumnowego oszustwa (seting pierwszą kolumnę aby być dokładnie tak wysokie i szerokie, jak na ekranie), ale nie jest to obsługiwane przez IE, więc i tak musisz użyć Javascriptu, aby to osiągnąć.

Powiązane problemy