Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Zander Perry
2,227 Points<pre> tag word-wrap?
I'm working on a basic messaging app (written in rails) and I'm using pre tags to view the body portions of received messages. Problem is the words aren't wrapping properly and the adjustments I've made to the css (paired with bootstrap) haven't solved this.
My html.erb code:
<div class="span6 offset3">
...
<pre style="background-color:white;"><%=h @message.body %></pre>
</div>
What I've tried adding to existing (bootstrap'd) css:
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
The pre tags are definitely working, but why can't I get the words to wrap properly?
3 Answers
Jason Seifer
Treehouse Guest TeacherHey Zander, How do you want it to look/wrap? Have you tried adding "!important" to any of those?
Zander Perry
2,227 PointsHey Jason, just tried !important and it helped me verify that the added css properties are in-fact hitting the pre tag (Thanks!). The issue is still persisting though.
The solution I'm after is for text to be left-justified/aligned and to wrap at the beginning of any word that will not fit fully in the line - pretty much like most text systems (Treehouse included).
What the problem appears to be is text wraps arbitrarily at the edge of the span6 tag rather than at the front of words that won't fit in the line. I tried other options on the white-space property, but pre-wrap seems to be the best option for ensuring the text wrap and preserving the line-breaks. It's almost as if the pre tag isn't even acknowledging the words there.
Zander Perry
2,227 PointsScrew it! I added ' white-space: pre-wrap; ' to div tag instead of a pre and it did the trick. Another lesson learned in keeping it simple.