1

http://Obvious.com（Mediumに移行します）と同様のレイアウト品質のWebサイトを設計しています。私はそれらのレイアウトについていくつかの素晴らしいことに気づきました、そして私がどのように行うべきかわからない1つの側面があります。

ホームページでは、各ブログ投稿の見出しの下にあるテキスト行に関しては、常に固定領域があり、テキストはテキスト領域内にきちんと正方形に収まっていることがわかります。また、見出しが長い場合は、それに応じて下のテキストが調整されます。

これはどのように行われますか？文字列の文字数を数える方法を試しましたが、見出しが長いと、選択した文字数がx文字少なくなります...しかし、これを行うと、次の単語にぶら下がる単語が1つか2つだけになることがありますしたがって、線は不均一な外観になります。（ムラのない見た目はしたくない）

では、テキストが常に行末に収まるようにする方法はありますか？そして、テキストの量は、フィッティング中に見出しのサイズに応じて変化しますか？

これはPHPソリューションですか？おそらくCSS？Javascript？（psこれらは私が使用できることがわかっている言語です）

参考のためにObvious.com（trans to Medium）にアクセスしてください。

4

2 に答える 2

0

特定の幅を持つ単なるcss divです

<div style="width:300px; height:400px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor justo quis urna hendrerit placerat. Ut fringilla rutrum nulla at rutrum. Nullam sagittis accumsan erat et venenatis. Maecenas luctus magna rutrum neque aliquet dictum at quis libero. Mauris at felis dolor. Nam sit amet euismod purus. Etiam tincidunt laoreet dui ut fermentum.</div>

これが私が作ったJsFiddleですhttp://jsfiddle.net/RZFYH/

于 2012-10-10T16:11:17.840 に答える
0

ソースを見ると、実際に表示されているよりも多くのテキストがブラウザーに渡されていることがわかります。彼らが行っているのは、記事の最初の x 文字を返し (たとえば、PHP によって生成された出力 HTML で)、コンテナー要素を CSS でクリッピングすることです。x の値は、試行錯誤して事前に決定する必要がありますが、実際には何も進んでいません。

CSS テキスト クリッピングの詳細については、 https ://developer.mozilla.org/en-US/docs/CSS/clipおよびhttps://developer.mozilla.org/en-US/docs/CSS/text-overflowを参照してください。

于 2012-10-10T16:12:08.870 に答える