Menu
I am trying to create a page display on mobile. Its layout like this:
/---------\ some text around
| | the image. some
| image | text around the
| | image. some text
\---------/ around the image.
some word around the image.
some word around the image.
I use floating style to implement that:
<div style="word-wrap: break-word; word-break: break-all;">
<img src="someimg.jpg" style="float: left;"/>
some text around the image. some text around the image. ...
</div>
However, if the word is longer than the right area max length but shorter than the whole div, it won't be break, instead it just be moved below the image.
/---------\ some text around
| | the image.
| image |
| |
\---------/
a-word-longer-than-right will
not be break and just display
below the image while a-word-
longer-than-the-whole-area-wi
ll-be-break-into-next-line
How can I break the word longer than right side and fill the empty area up?
274
The word-wrap property is used to split/break long words and wrap them into the next line. word-break: break-all; It is used to break the words at any character to prevent overflow. word-wrap: break-word; It is used to broken the words at arbitrary points to prevent overflow.
Breaking long words The word-wrap property is now treated by browsers as an alias of the standard property. An alternative property to try is word-break . This property will break the word at the point it overflows.
What you did here is use the CSS "float" property, which will pull the image from normal document flow (the way that image would normally display, with the text aligned beneath it) and it will align it to the left side of its container. The text that comes after it in the HTML markup with now wrap around it.
Here, we create one main div and inside this another div. after this we create a row and we divide the row in two parts with width attribute. After this we specify dimensions to both image and text with float left to align them side by side. This is the basic model to align images and text side by side.
Insert ­ soft-breaks in the long word. There are various PHP libraries that can do that for you, based on dictionaries.
73
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
