Question

我需要在图像周围包装文本，这个文本可能包含很长的单词（医学名称）。我做的很明显，并且一直在尝试其他一些事情，但这是我当前代码的外观。

<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上但在图像下:(。

Answer 1

使用word-wrap: break-word并使用浏览器前缀版本和基于JavaScript的连字符来代替hyphens: auto，而不是<!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>。示例（带有更正和扩充标记）：

{{1}}

Answer 2

我认为您必须将te img-tag插入到p-tag中。（也许不是很好，但我没有看到其他选项）

html包装和打破图像周围的单词

2 个答案: