I have spent hours trying to prevent one of my child divs from breaking its parent's div.
Link: http://bowenhost.com/wordpress/
Screenshot:
It's the saddads widget / div that keeps breaking.
Feel free to inspect element / firebug on your web browsers to find a solution.
Thanks in advance guys. I really appreciate it!
the content is with out spaces. so it is treated as single word. give some sentence with space between the words and check
If you want to break the word which has no spaces you can use word wrap of css3
.textwidget {
word-wrap: break-word;
}
It will break to a new line if there is a space. But if there is no space you could look into using these CSS properties.
Word Wrap - word-wrap: break-word;, https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
Word Break - word-break: break-all;, https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
Make sure to check the compatability on those pages.
you just make some two new classes for your HTML than it will work perfectly see below how i achieved your desired result....and one thing more with this just add spaces between your content also... so you will have to give the space between the content....
make these two classes for your HTML
CSS
.widget-inner {
overflow: hidden;
}
.textwidget {
white-space: pre-wrap;
}
see the attached demo image you will get a basic idea how i did
Related
I'm fairly new to coding and I just can't figure out to make the text in one row of a column to wrap. Right now they overflow into the next column. The table is responsive, but this one line refuses to cooperate. I do not have access to the html so it has to be fixed with just css.
I've tried overflow, text-overflow, white-space, overflow-wrap, nothing works!
I know I'm targeting the right div and class since i'm able to make that exact text red, but when I try to make the words wrap, in Chrome Dev Tools, it automatically gets a strikethrough.
What am I doing wrong?
#IDX-showcaseGallery-3643.IDX-showcaseTable .IDX-showcaseCityStateZip span.IDX-showcaseAddressElement {
overflow-wrap: break-word !important;
color: red;
}
This is how it looks like:
The website is newtraditionrealty.com .
Thanks for an advice!
This rule is preventing your white space from wrapping:
.IDX-showcaseCityStateZip span {
white-space: pre;
}
Removing it allows the text to wrap again.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
I have a site where the client wants to be able to put a stylized graphic at the end of some link text. Conceptually, it'd be like this:
This is My Fancy Title<img src="fancypic.png"/>
Except at some widths, word-wrapping causes the image to wrap as a widow on it's own line.
I've tried quite a few different approaches to this, including the widows CSS property, but nothing seems to work 100%.
Any suggestions?
You can use white-space: nowrap.
That will cause the text and image to not wrap to the next line.
Add a span and put one or 2 words and the image in it, make it inline-block
span {
display: inline-block;
}
This is My Fancy <span>Title<img src="fancypic.png"/></span>
I'm trying to achieve a combination of three goals...
Determine if I should use <code><pre>...</pre></code> or <pre><code>...</code></pre>?
Make code not wrap, not create horizontal scrollbars and not overflow any parent element.
Ensure that when a visitor copies code that the white-space is maintained when they paste it in to any (competent) editor.
So far I've had the most luck with white-space: pre-wrap; however I do not want the text to wrap. If they're interested enough they'll copy-paste it for themselves. While I do not want it to wrap I also do not want it to make the element overflow outside of any parent element and I don't want the text to appear outside of it's direct parent element.
I'd be okay with a horizontal scrollbar for the code itself (pre or code element, whichever) though I'd generally prefer not to.
Just in case it's relevant I don't use any CSS frameworks or the likes, I only do a basic reset...
* {border: 0px; margin: 0px; outline: none; padding: 0px; }
I test in Firefox, then Chrome, then (actual) Opera and then maybe IE if I have sanity to spare. Thoughts please?
On number 2 and 3: Hopefully I haven't misunderstood your question--I got what I understood your goal to be working easily by by adding a fixed width and overflow:hidden to the css class.
On 1: it's working with <pre (outer)><code (inner)> so... hey.
http://jsfiddle.net/A2zhH/2/
FYI, border: gray; isn't doing anything. You need to use the format border:1px gray solid;
Goal 1 is simple: code inside pre is valid, pre inside code is not. On the other hand, pre is what matters here. You can use code inside it as a matter of principle if the content is computer code.
Goal 2 is self-contradictory as such, unless you are referring to an idea of reducing font size so that everything fits. More realistically, with regard to the statement that it is okay to have a horizontal scroll bar for the code block, use just
pre { width: 100%; overflow: auto }
This causes a horizontal scroll bar to appear for the block, instead of overflowing the content.
Goal 3 is achieved when you use normal spaces. What is copied contains spaces, and what happens to them after paste depends on the software.
I got it working to an accuracy of about 99.8% of the time using the following...
XHTML
<pre><code>/* Code here. */</code></pre>
CSS
pre {white-space: pre; width: 75vmax;}
I have a div and all the long words (without spaces) flow outside the div.
Please don't mark the question as a duplicate of How to prevent long text from flowing out of a container or Long words are flowing out of the box - How to prevent?, where the problem is solved by using word-wrap: break-word;.
The disadvantage of word-wrap: break-word; is that it also breaks short words which are at the edge of the div, in a way that disrupts the flow of the text. I want short words to remain the way they are and only break the long words. Is it possible to implement this? How do other websites handle it?
it also breaks short words which are at the edge of the div
That's not true...word-wrap: break-word; shouldn't do that.
Perhaps you're confusing this with the word-break: break-all; property (which doesn't work in all browsers).
See this jsfiddle for a comparison:
http://jsfiddle.net/Snu8B/3/
For firefox you could try the hyphens property.
If you are willing to "hide" the words you can play with overflow:hidden
.mydiv {
height : youchoose;
width : youchoose;
overflow: hidden;
}
Otherwise:
word-wrap : normal|break-word;
normal : Break words only at allowed break points
break-word: Allows unbreakable words to be broken
word-break: normal|break-all|hyphenate;
normal : Breaks non-CJK scripts according to their own rules
break-all : Lines may break between any two characters for non-CJK scripts
hyphenate : Words may be broken at an appropriate hyphenation point
I have a line made of inputs and spans which should represent a phone number. Inserting it into a table with some columns with content causes the line to break:
The last input is pushed into the next line. One way to fix this could be setting a fixed td width or min-width. However, for the sake of any future projects I would like to know is there a way to make the html content unbreakable without touching the td width. Thanks for any info.
Add this CSS to the td
white-space: nowrap;
This prevents the automatic line-breaking of HTML. For more info see MDN
add
white-space: nowrap;
to your css
Using white-space: nowrap should get the job done.
In bootstrap it's a class text-nowrap.