Text may not exceed border width (How can I do this)

[stefan1294]

Hey, I'm working on a webiste with a border. I have placed the border in a div. I managed to make the border height (div height) to adjust on the amount of text lines in the div. However, I can't make it work for the width of the border. How will I be able to do this?My current script:

#border{font-family: Maiandra GD;top: 500px;left: 390px;width:655px;<-- It may not pass this widthmin-height: 20px;overflow: visible;padding: 10px;border-radius: 15px;border-style: solid;border-width: 1px;border-color: #D0D0D0;position:absolute;margin:-50px auto auto -100px; }

 <div id="border">Hai<br/>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div>

I want the haihai spam, to be seperated to more lines so it simply won't exceed the width of the border.

Edited October 17, 2012 by stefan1294

[ShadowMage]

You can set the overflow to hidden and it will just hide the text that extends beyond the border. The only other solution would be to use the word-wrap property and set it to break-word:

word-wrap: break-word;

but I'm not sure if older browsers will support it since it's CSS 3. IE 8 supports it, so I would imagine that support in other browsers is pretty good. The only question is whether IE 7 and down support it.

[stefan1294]

You can set the overflow to hidden and it will just hide the text that extends beyond the border. The only other solution would be to use the word-wrap property and set it to break-word:

word-wrap: break-word;

but I'm not sure if older browsers will support it since it's CSS 3. IE 8 supports it, so I would imagine that support in other browsers is pretty good. The only question is whether IE 7 and down support it.

Thank you. I am working on a project, which will not be released in the public, so I'll justu se the word-wrap prop

[Ingolme]

You really shouldn't need a word so long that it gets outside the box. The best suggestion would be to use proper words and you won't need to change anything.

[ShadowMage]

You really shouldn't need a word so long that it gets outside the box. The best suggestion would be to use proper words and you won't need to change anything.

While that may be true, a developer should never think that way. You shouldn't think only about what a user is supposed to enter, but also what the user could enter. This is why data to be used in a query is sanitized and why input fields are validated. Just because a user shouldn't enter something, doesn't mean they can't. Invalid or improper data needs to be handled. EDIT: This is, of course, assuming that the text that OP is trying to wrap is user entered data. If it isn't, then yes, using proper words would be the best suggestion. Even still, OP may have a valid reason for needing a "word" that long, though 655px in length is unlikely. Edited October 17, 2012 by ShadowMage

[dsonesuk]

well according to this, which i have used on rare occasions it shows it work for IE5+

    white-space: pre;		   /* CSS 2.0 */    white-space: pre-wrap;	  /* CSS 2.1 */    white-space: pre-line;	  /* CSS 3.0 */    white-space: -pre-wrap;	 /* Opera 4-6 */    white-space: -o-pre-wrap;   /* Opera 7 */    white-space: -moz-pre-wrap; /* Mozilla */    white-space: -hp-pre-wrap;  /* HP Printers */    word-wrap: break-word;	  /* IE 5+ */

[Ingolme]

Personally, I'm not bothered if a user messes up my site with a long word. If they're posting something like that I most likely would have to delete their comment due to spam. Therefore, though I would apply the word-wrap property I wouldn't go out of my way to support older browsers.

[stefan1294]

Ingolme and ShadowMage both got a point. I'm entering loads of text in that border, and I cannot be arsed to refresh my page (yes, I am writing my whole website from scratch, in Notepad++) every line I type. I'm using the same border for ~12 other pages. It indeed is not necessarily for me to use the word-wrap prop, as I am not using it for 'user data'. However, for the moment it saves me a lot of time.