Large or long words extend past column before layout adjusts #3645

Closed
dansalmo opened this Issue May 30, 2012 · 2 comments

Comments

Projects
None yet
2 participants
@dansalmo

I am not an advanced user of CSS so forgive me if this issue is due to my misunderstanding.

I am using the latest (v2.0.3) bootstrap Hero example to show this issue. When I create a single_long_word of text greater than about 1/2 the column size (due to a large font or simply a large number of characters in a single word), the text extends past the column before the layout adjusts as I make the browser window smaller

All I had to do was change the text in the column to make a large or long word and then reduce the window size of the browser. The column layouts do eventually adjust to allow for more width, but not before the long word exceeds the boundary of the column it is in.

This happens for both normal and fluid containers in with a responsive grid.

It is easy to duplicate in Chrome by just going to this page and editing the text after inspecting a column element.

http://twitter.github.com/bootstrap/examples/hero.html

I have also posted the issue to http://stackoverflow.com/questions/10778699/bootstrap-grid-not-adjusting-before-text-flows-outside-of-container but have not yet received any suggestions.

@mdo

This comment has been minimized.

Show comment Hide comment
@mdo

mdo Jun 3, 2012

Member

This is how browsers render their text. The only way to get the text to break is to force it with CSS, and we won't be doing that in the core. Google "css break word" and you should be able to find an answer.

Member

mdo commented Jun 3, 2012

This is how browsers render their text. The only way to get the text to break is to force it with CSS, and we won't be doing that in the core. Google "css break word" and you should be able to find an answer.

@mdo mdo closed this Jun 3, 2012

@dansalmo

This comment has been minimized.

Show comment Hide comment
@dansalmo

dansalmo Jun 3, 2012

Thank you for responding. I had used "css break word" but I was hoping there was a way in bootstrap to trigger an automatic reduction in the number of columns right before breaking a word unless there is only one column.

dansalmo commented Jun 3, 2012

Thank you for responding. I had used "css break word" but I was hoping there was a way in bootstrap to trigger an automatic reduction in the number of columns right before breaking a word unless there is only one column.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment