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 回答