Jump to content

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


stefan1294
 Share

Recommended Posts

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 by stefan1294
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 :)
Link to comment
Share on other sites

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 by ShadowMage
Link to comment
Share on other sites

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+ */

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...