2

画像の周りにテキストを折り返す必要があります。このテキストには非常に長い単語 (医薬品名) が含まれている可能性があります。私は明らかなことをしており、他にもいくつか試してみましたが、これが私の現在のコードの外観です。

<div style='width:120px;'>
    <img scr="myImage.png" style='float:right;width:50px;'>
    <p style='word-wrap:break-word;'>This_is_the_very_long_word_without_hyphens_I_need_to_wrap_.</p>
    <p>This is a normal paragraph of text that needs to flow around the image if there is space available. Leaving the option of tables out of question and specially because the height of the image may vary and don't want a huge white space between the paragraphs.</p>
<div>

そのため、単語は div で折り返されますが、画像の下では :(.

4

2 に答える 2

1

word-wrap: break-word文字通り言葉を壊すの代わりに、hyphens: autoブラウザのプレフィックス付きバージョンと JavaScript ベースのハイフネーションを使用してバックアップします。例 (修正および拡張されたマークアップを使用):

<!doctype html>
<html lang=en>
<script src=
"http://hyphenator.googlecode.com/svn/tags/Version%204.1.0/Hyphenator.js">
</script>
<script type="text/javascript">
Hyphenator.config({useCSS3hyphenation: true});
Hyphenator.run();
</script>
<style>
.hyphenate { -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
</style>
 <div style='width:120px;'>  
    <img src="myImage.png" alt="" style='float:right;width:50px;'>
    <p class=hyphenate>Xylometazoline
    <p>This is a normal paragraph of text...</p>
</div>
于 2013-01-03T09:09:34.017 に答える
0

te img-tag を p-tag に挿入する必要があると思います。（あまり良くないかもしれませんが、他のオプションはありません）

于 2013-01-03T00:12:06.023 に答える