[adn258]

So an issue with CSS etc. Here's the deal


Looking at the image above I know it's small sorry but you can see there's a CSS div class or ID with a solid border etc. The text that the div is in between is bleeding OUTSIDE THE BORDER like

<div class="xyz">
TEXT IS HERE BLEEDING OUTSIDE THAT BORDER
</div>

Sometimes the container with SQUISH THE TEXT down to fit it's size i.e. if I made that xyz contained 200px wide the text would look thin like

he
how
are
you

instead of hi how are you bleeding out.

Why does this happen? Thanks

[StefanOnRails]

Take a look here and see if it helps you. It would be useful if you could post the full HTML & CSS sources.

[adn258]

StefanOnRails, on 18 September 2012 - 11:35 AM, said:

Take a look here and see if it helps you. It would be useful if you could post the full HTML & CSS sources.

I already knew that stuff no offense it doesn't explain why it bleeds. I don't really want to show what I have as it would give away my site and no offense I don't want to do that here. That said I'm wondering if anyone else has has had similar experiences with having bleed issues when it comes to creating CSS Div's

[Nullified]

I don't understand your issue. You want to know why if you shorten a div's width to a specified px value it wraps the words to the next line if the text width if longer then the div width? That is standard. a div a block style element, thus if you specify a width, that is not a minimum width it is a static width. Try auto.

[adn258]

Nullified, on 18 September 2012 - 02:39 PM, said:

I don't understand your issue. You want to know why if you shorten a div's width to a specified px value it wraps the words to the next line if the text width if longer then the div width? That is standard. a div a block style element, thus if you specify a width, that is not a minimum width it is a static width. Try auto.

No that's what I'm saying friend I do specify a width like say 500px and the text within that supposed 500px width border bleeds outside the border like the div wasn't even there even though it is

[adn258]

So I figured out the general idea of what is wrong. It has to do with content text overflow and setting overflow to hidden etc. The problem is some users might add unusually large comments making them bleed over or if I set this to scroll or auto those scrolls look ugly.

I don't know how sites solve this problem like this site to stop text overflow all together good question I guess.

[StefanOnRails]

Try to add word-wrap: break-word; in your div CSS rule and see if it works. As I said before it would be useful to post more of your HTML / CSS code. If you don't want to post the entire page source it's ok, but you need to understand that working with CSS can be tricky sometimes and we cannot predict what's your problem without viewing more of your code. Maybe you have a markup problem, are you sure all your tags are properly enclosed (well, those who require that)? Are there any floats in your CSS rules? If you don't want to post the whole source you can do something like this:

HTML:

<div id="container">
   ....
   <div class="xyz">
       <p>some text here</p>
   </div>
</div>

CSS:

.xyz{
  width: 500px;
  ...
}

[RudiVisser]

adn258, on 19 September 2012 - 09:06 AM, said:

It has to do with content text overflow and setting overflow to hidden etc.

This. As you've already figured out, overflow's default value is visible, which is why your overflow.. is.. visible!

No but really that's exactly the reason good job for working it out on your own.

adn258, on 19 September 2012 - 09:06 AM, said:

I don't know how sites solve this problem like this site to stop text overflow all together good question I guess.

I'm not sure so much what you mean here, sites are designed to not require overflow and/or will just scroll when required. What exactly is it that you're trying to achieve?

(Just read the rest of your post again) Users adding comments should be fine, simply truncate them to a certain length using a server-side language, output '...', and upon hover pop up the full comment in a floaty div.

[Nullified]

Yes, glad to see you figured it out.

[adn258]

StefanOnRails, on 19 September 2012 - 01:24 AM, said:

Try to add word-wrap: break-word; in your div CSS rule and see if it works. As I said before it would be useful to post more of your HTML / CSS code. If you don't want to post the entire page source it's ok, but you need to understand that working with CSS can be tricky sometimes and we cannot predict what's your problem without viewing more of your code. Maybe you have a markup problem, are you sure all your tags are properly enclosed (well, those who require that)? Are there any floats in your CSS rules? If you don't want to post the whole source you can do something like this:

HTML:

<div id="container">
   ....
   <div class="xyz">
       <p>some text here</p>
   </div>
</div>

CSS:

.xyz{
  width: 500px;
  ...
}

Wow!! Yes that keeps the text from overflowing all together even if someone enters a long word like adklfjsklfjdkljfkljfkljdsflkajsdlkfsadjskfsajdlfk etc. as spam. I really appreciate your help friend +++; It will probably still be good for me to handle overflow with hidden if I allow users to post images. I was also thinking of using php to wrap ever comment in it's OWN DIV!! I'm wondering if there's anything wrong with this idea but I can't think of anything. The reason this might be good is instead of ruining the whole comment section say by someone posting a large image it can only ruin that one comment and add scroll bars to it. Just a thought I don't know.

[StefanOnRails]

adn258, on 19 September 2012 - 09:02 PM, said:

Wow!! Yes that keeps the text from overflowing all together even if someone enters a long word like adklfjsklfjdkljfkljfkljdsflkajsdlkfsadjskfsajdlfk etc. as spam. I really appreciate your help friend +++; It will probably still be good for me to handle overflow with hidden if I allow users to post images. I was also thinking of using php to wrap ever comment in it's OWN DIV!! I'm wondering if there's anything wrong with this idea but I can't think of anything. The reason this might be good is instead of ruining the whole comment section say by someone posting a large image it can only ruin that one comment and add scroll bars to it. Just a thought I don't know.

Yeah, wrapping comments into their own divs seems to be a good idea, this way you could style them to look like a or something similar. However, they should still be rendered inside a "container" div, this will give you more control over comment section. As for "posting large image" problem, overflow: hidden will crop any content that is rendered outside regardless of it's type (text,img etc.), but I guess you can add scrolls if you want to allow user to view the whole image. By the way, you can control comment's text length via PHP strlen() function, but if add an image extra characters will be added as well.

[Nullified]

StefanOnRails, on 20 September 2012 - 04:13 AM, said:

By the way, you can control comment's text length via PHP strlen() function, but if add an image extra characters will be added as well.

I would use substr_replace($string, '...', 10, -1) as strlen will just tell you the length in characters of the string.