[HTML] Table text on new line

Hi,

I'd like that my text starts on a new line when it reaches it width, but i have spend like 3 hours trying lots of things to get that done, but still no result.

This is my code:

Code:

---

<div style="padding-left:25px; position:relative;">
<p style="font-weight:bold;text-align:center">Product Naam</p>
 
<img src="http://fortixservers.com/knoef/3/images/bar.png" alt="" width="731" height="12"/>

    <div style="float:left;padding-top:10px; display: block;"><img src="http://www.webcamcenter.nl/catalog/images/utp_patchkabel.gif" width="133" height="100" alt="Naam Product/"/></div>
    <table width="500px" border="0" cellspacing="0" cellpadding="0" style="float:right;padding-right:25px;overflow:inherit;display:inline-block;">
              <tr>
                                                                                       
                                                                                                  <td height="62" width="500px" style="text-align:center">asdsadsadasdddsaSAsaSasAsddddddddddddddddddddddsdasdasdasddddddddddddddddddddddddddd</td>
                  </tr>


     

</div>

---

It currently looks like this:

http://i47.tinypic.com/15oi1cp.png

Word-Wrap: Force Text to Wrap

Is that what you're looking for?

It seems like it, i will give it a try. Thanks!

Edit: Doesn't do anything

Edit: Modified my code and it works fine now, thanks for giving that link ;)

Quote:

---

.Text {
height: auto;
width: 570px;
word-wrap: break-word;
float:right;
padding-right:25px;
padding-top: 15px;
text-align:right;

---

the point is, your "text" has no space in it, so it wont wrap.
setting the css property word-wrap to break-word will force your visitors to use css3 compatible browsers.

however you could set zero width spaces & # 8203;​ where u would allow breaks to be compatible with all browsers. if your content is dynamic at all, use your server sided code (no matter what kind of) to check the string with the regular expression [^\s]{50} (while {50} is your max allowed characters) and replace it with "​& # 8203;{0}& # 8203;​" (while {0} is the whole match) to find non spacing strings and put break points around/into it.

(remove the spaces between &, #, and 8203;)


my two cents for old browsers.

Quote:

---

Originally Posted by VibeTribe

setting the css property word-wrap to break-word will force your visitors to use css3 compatible browsers.

---

https://developer.mozilla.org/en-US/..._compatibility

Correct me if my resource is wrong, but word-wrap is one of the few (if not the only) css3 properties supported all the way down to IE5.5. I think it's okay to use for 99.9999% of users by now.

First off; where's your </table> tag?
Secondly; why don't you just write a <br /> tag where you want the wrap to be?

Also, for your CSS; you've missed several ";" and "px" where they should normally be.

Quote:

---

Originally Posted by Selfrot

First off; where's your </table> tag?
Secondly; why don't you just write a <br /> tag where you want the wrap to be?

Also, for your CSS; you've missed several ";" and "px" where they should normally be.

---

Try not to use <br />... Try not to use tables, too.

<br /> especially will be horrid for dynamic data- as will using& # 8203;

Assume you use this technique on user-contributed comments. Say a user wants to be silly and enters 1000 't's with no spaces. You can dynamically insert <br /> or your & # 8203; spacing based on a fixed amount of characters. That will work only for designs using a fixed-width font. That's great, but I have almost never seen a design with fixed-width fonts. Okay, so say you decide to use a fixed width font. Now, you cannot use a dynamicly expanding width. Which means your site will not work with percentages or flexbox, or bootstrap's fluid grid, or many other great techniques for web and mobile-web design. Another issue is if you ever change the design, you have all these weird cases in your data that you must correct in order for the design to work.

The problem here is a coupled strategy being used with data and design. You should not alter the data for design purposes. Let the front-end logic deal with all of the design problems, and let the server think about supplying the client with data and accepting data from the client.

Quote:

---

Originally Posted by s-p-n

https://developer.mozilla.org/en-US/..._compatibility

Correct me if my resource is wrong, but word-wrap is one of the few (if not the only) css3 properties supported all the way down to IE5.5. I think it's okay to use for 99.9999% of users by now.

---

oh might its available in old browsers too, but it doesnt seem to work like the thread starter wants to in older browsers, i saw several comments on stack overflow about word-wrap isnt working, so.

Quote:

---

Originally Posted by VibeTribe

oh might its available in old browsers too, but it doesnt seem to work like the thread starter wants to in older browsers, i saw several comments on stack overflow about word-wrap isnt working, so.

---

So test old browsers on this:
Edit this Fiddle - jsFiddle

StackOverflow isn't a resource for HTML/CSS support in browsers. I seem to remember using word-wrap back in '07 or '08. with ff 3 and IE6 battling it out.