2

長いリンクなど、長い単語を分割する必要があります。私が取り組んでいるレイアウトはfluid-layoutであるため、固定幅は提供されていません。その代わりに、任意のコンテナーの幅に合わせてテキスト ブロックを調整し、長い単語を分割して任意の幅に合わせられるようにする必要があります。

http://jsfiddle.net/cYDJd/1/に例がありword-wrap: break-word;、画像が左側に浮かんでいる間、CSS ルールによって壊れていない長いリンクが表示されます。長いリンクが画像の下にある場合のみ、正常にword-wrap機能します。

ここに、JSFiddle のコードの縮小版があります。

CSS:

.left {
    float: left;
}
.justified-block {
    text-align: justify;
    word-wrap:break-word;
}

HTML:

<a href="#" class="left"><img src="some-image.jpg" /></a>
<p class="justified-block">Some text with a very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong link.</p>

あなたの親切な提案に感謝します。

4

1 に答える 1

-1

このようなもの？

私はブラウザのサポートをチェックしませんでした:/

http://jsfiddle.net/insan3/nrQFQ/2/

<style>
.block{
 width: 200px;
 display: block;
 border: 1px solid #DDD;
 display: table;
}

.block a{
 text-transform: uppercase;
}
.s1x{ font-size: 10px;}
.s2x{ font-size: 14px;}
.s3x{ font-size: 16px;}

.word-break{
 word-wrap: break-word;
 word-break: break-all;
 }
 </style>

<span class="block">
<p class="word-break"><a class="s1x" href="#">&bull;Current Lipsum Content Link Here it &bull;</a><a class="s3x" href="#">Current Lipsum Content Link Here it Current&bull;</a><a class="s1x" href="#"> Lipsum Content Link Here it Current Lipsum Content Link Here&bull;</a> <a class="s3x" href="#">it Current Lipsum Content Link Here it Current Lipsum Content Link Here it&bull;</a></p>

于 2013-10-05T03:28:40.780 に答える