html包裝和打破圖像周圍的文字

我需要圍繞圖像包裝文本，這個文本可能包含一個很長的單詞（藥品名稱）。我正在做顯而易見的事情，並嘗試了其他一些事情，但這是我目前的代碼的外觀。html包裝和打破圖像周圍的文字

<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上，但圖像:(下。

來源

2013-01-03 SergioM

而不是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-03 09:09:34

工作就像一個魅力！謝謝！！ – SergioM

我認爲你必須插入TE IMG標籤進入P標籤。（也許不是很大，但我沒有看到其他選項）

來源

2013-01-03 00:12:06

剛剛嘗試，我得到相同的效果。它包裹在圖像下。謝謝 – SergioM

html包裝和打破圖像周圍的文字

回答

相關問題