イメージに沿ってテキストを折り返す方法は？

-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:200はCSSで無効であるとしてもwidth: 200pxを使用しています。

更新

<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 'Long text text text 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 Spec] （https://developer.mozilla.org/en/docs/Web/CSS/width）は、 'px'を置くために**必要**を言っています。 –

イメージに沿ってテキストを折り返す方法は？

答えて

関連する問題