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
Related
How do I make element visible only inside letters and not around them?
I want to position absolutely an element over some text and only make the element visible inside letters.
Is there something like "overflow: hidden" for the text?
Text to set overflow : hidden on
#Edit: Maybe I did not express myself well enough, I want to put some div or image etc. over some text and make it so the div/image, only shows trough letters as if they were holes cut in the foreground element, but I also want to keep text color when there is nothing "covering" it;
I don't understand what you want but there is the text-flow, that can help you.: text-flow
Look at this code, can help as well :
width: 200px; //define a fixed width
white-space: nowrap; //it's like flex-wrap: nowrap, avoid the line breaks
overflow: auto; //or hidden in your case
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 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
I have a table in which each of its TD contains image (more precisely, emoticon) which have same height. Oddly, they are not properly aligned. One emoticon is at the top, the other is at the middle, and the other is at bottom.
Here is a picture to make the explanation easier:
http://i.imgur.com/ITbBp.png
I tried to copy the HTML structure to jsfiddle, but it is properly aligned in there. So I believe this is a CSS problem.
However, my try to modify everything results in no avail. I cannot make it aligned properly. I tried vertical-align:middle and tried to set the padding and margin but I cannot make it align properly.
Is there any help to do this?
EDIT: it turns out that this CSS is the one that is making the problem:
.emotlist {
overflow: auto;
height: 175px;
width: 120px;
}
When I remove the overflow: auto, it displays as I want it to be. But the problem here: I need the overflow:auto to make scrollbar, so in case there are more emoticons added to the table, it will not exceed the defined-height.
EDIT 2: I guess it is not the overflow: auto which is causing the problem, since it is just working fine in the fiddle (as demonstrated by Sheilender)
Disclaimer: I cannot change the HTML structure (in case someone suggest so). I don't have access to the HTML template and what I can do is only style it via CSS.
.
Looks to me like the after each image is being broken to a new line hence the problems.
Try:
.emotlist table tr td {
width: 25px;
}
This should make the cell wide enough to accomodate the image and the
or
.emotlist table tr td {
white-space: nowrap;
}
To prevent the cell from breaking any lines.
see i have made changes according to your requirement with your css
http://jsfiddle.net/uxyjg/14/
you can read more about vertical center content