7

ブラウザ ウィンドウの高さが 105 ピクセルで、テキストの各行が高さ 10 ピクセルのテキスト ブロックを表示するとします。ブラウザはウィンドウに 10 行と 1/2 行を表示します (つまり、一番下の行は垂直に切り取られます)。

この動作を防ぎ、10 行しか表示しない方法はありますか?

これを行う理由は、HTML ウィジェット (UIWebView) を使用して、ページめくりパラダイムで表示される本をレンダリングするためです。

注: @page ルールはこれを達成するのに役立つはずですが、プリンターに印刷する場合にのみ適用されるようです。

4

4 に答える 4

3

これまでにリストされた解決策はすべて、テキストが途中で途切れたままになっているようです。いくつかの凝ったJavascriptを使用すると、ブラウザに楕円を貼り付けてテキストを切り捨てる場所を見つけさせることができます。これは、プログラミングが驚くほど難しいという犠牲を払って、きびきびと見えます。これについては、この投稿で詳しく説明しました。

jQueryを使用できる場合は、jQuery関数を使用して次のように実行できます。

<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>
于 2010-09-03T22:33:32.970 に答える
0

メタタグを使用できます

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

または、次のような定型化されたdivタグにテキストを配置することもできます。

<div style = "height：100px; text-overflow：hidden; overlay：ellipsis">
文章....
</ head>

全体として、テキストをスクロール可能にしたり、残りのコンテンツを表示したりする場合は、いくつかの主要なJavaScriptが必要になります。

于 2010-09-03T10:22:50.597 に答える
0

おそらくCSS3マルチカラムトリック（最初のカラムを画面とまったく同じ高さと幅に設定する）でそれを行うことができますが、それはIEでサポートされていないため、とにかくそれを達成するにはJavascriptを使用する必要があります。

于 2010-09-04T18:14:14.233 に答える
0

割り当てられたボックス/スペースにそれらを表示するようになったときに、表示する行数がわからないのではないかと思います。また、全体が見えない可能性のある行を次のページに配置しますか?

これは純粋な CSS では達成できないと確信していますが、jQuery とオフページの隠し DIV を使用するとおそらく可能です。基本的に、非表示の DIV を目的の幅に設定し、入力し、jQuery を使用して高さを確認します。高すぎる場合は、テキストを切り詰めてからやり直してください。

于 2010-08-31T21:08:11.147 に答える