开发者

CSS: exceeding width when nospace?

开发者 https://www.devze.com 2023-01-25 10:14 出处:网络
#profileWall{ margin: auto; width: 1200px; } And then inside it, if i have this without no space at all: sdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsa
#profileWall{
margin: auto;
width: 1200px;
}

And then inside it, if i have this without no space at all:

sdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasadsadsadsadsadssdfasads

It exceeds the width and just continues. But if there开发者_StackOverflows spaces in it it cuts and goes to new line when it reach the width like it should.

How can i fix this?


overflow:hidden

or with CSS3

word-wrap: break-word

CSS3 thanks to @mistabell


There a couple of solutions.

  1. Use overflow. Because there are no spaces, the browser won't be able to add a new line. So, you can control the div by setting overflow:scroll or overflow:hidden. This will either add scroll bars or hide the long data.

  2. Use code on the backside to inject a space after some number of characters. A lot of sites do this in combination with adding a link for [more].

  3. Redesign your site to accommodate long non-breaking text.

  4. Don't allow such input to begin with. If this is text that someone is typing and it's supposed to be normal words, just test word length to see if you have any words longer than about 30 characters. You could either automatically inject a hyphen in there to allow word wrap or simply not allow gibberish. Adjust as necessary.

  5. Go the twitter route and just don't allow more than 140 characters. Design the site accordingly.


Here ya go: http://jsfiddle.net/VEu6w/

white-space: nowrap;
0

精彩评论

暂无评论...
验证码 换一张
取 消