如何在圖像上包裝文字？

-3

如何讓這個長單詞（單詞的一部分）沿圖像出現在同一行？我曾嘗試：

<div style="width:200;background:#00FFFF;word-wrap:break-word;"> 
<img src="1.png">ThisIsAveryVeryVeryLongWordNextToTheImage 
</div>

來源

2016-04-26 rosemary

@Aziz你爲什麼要改變原有的代碼？ –

我把它做成了一個堆棧片段，這有什麼問題？它仍然是一樣的，只是更清楚。 – Aziz

@Aziz你在'200'旁邊加了'px'這就是下面的論點。檢查。 –

使用white-space: nowrap：

<div style="width:200px;background:#00FFFF;word-wrap:break-word;white-space: nowrap;"> 
    <img src="1.png">ThisIsAveryVeryVeryLongWordNextToTheImage 
</div>

還可以使用width: 200px爲width:200是CSS無效。

更新

<div style="width: 200px; background: #00FFFF; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;"> 
 
    <img src="//placehold.it/100x100" />ThisIsAveryVeryVeryLongWordNextToTheImage 
 
</div>

來源

2016-04-26 14:11:35

謝謝，但這使得文本的一部分出現在不是預期的容器div之外。 – rosemary

@rosemary像「長文本文本文本tex ...」會更好？ –

我明白了你的意思，但是急於想知道是否有太長的詞，那麼解決方案是什麼。 – rosemary

<div style="width:200;background:#00FFFF;word-wrap:break-word;word-break: break-all"> 
 
    <img src="1.png"> ThisIsAveryVeryVeryLongWordNextToTheImage 
 
</div>

來源

2016-04-26 14:25:44 rosemary

這是無效的。 'width：200'無效。檢查我的答案。 –

我知道它的朋友，它應該是寬度：200px，但瀏覽器也做得很好 – rosemary

您的代碼中的Chrome 50（最新）：http://i.imgur.com/zj7CoIv.png我確信[CSS規格] （https://developer.mozilla.org/en/docs/Web/CSS/width）表示你需要**來放置'px'。 –

如何在圖像上包裝文字？

回答

相關問題