I need to keep a group of images from wrapping.
I was hoping the css below would do it, but it's still not working.
img {
display: inline;
vertical-align: top;
float: none;
}
Here's the demo: http://plnkr.co/edit/BwM8SuOpV49MuxXSnfP6?p=preview
Is there a way to do this?
Thanks!
-- EDIT --
Here's a better example: http://plnkr.co/edit/WwIh6EoHcpHO18Ln06Td?p=preview
This shows a sentence (with each character rendered as an image) being wrapped at the wrong spot. Is it possible to set a css nowrap value per image?
...ok, figured it out: the solution is to wrap each word in an inline-block span
CSS clear property
http://www.w3schools.com/cssref/pr_class_clear.asp
clear: none|left|right|both|initial|inherit;
Related
I need the anchor text to wrap to the second line and still maintain the layout.
I have tried everything and I am not sure what I am doing wrong here.
Above is how I want it. My demo site where u can see the live layout : http://www.iamvishal.com/residen/?q=node/54
I have tried many variations
max-width
word-wrap
but nothing seems to work.
The strange wrapping is due to the use of padding on an inline element. You should either move the padding to the li elements instead of the anchors or change the anchors to display: block or display: inline-block.
I played arnd with your CSS on your website. This seems to do the trick. Do post your css and html on jsFiddle so we can better help you.
#navigation .links, #navigation .menu {
text-align: -moz-center;
}
Inline elements are great, because their width is the width of the content and because it's possible to center them with on rule of CSS:
text-align: center
But inline elements stay on the same line. Is it possible to align them vertically?
Fiddle: http://jsfiddle.net/_bop/NhVaF/
Full screen fiddle: http://jsfiddle.net/_bop/NhVaF/show
Please don't:
Change the HTML in the example. Change the CSS!
Come up with other techniques to center elements, unless you have a better solution that works on elements with unspecified width and doesn't need tons of containers and/or float hacks.
Thanks in advance!
In your markup, if the span are on different rows you could add on the parent container:
white-space: pre-line;
With this CSS declaration, your span are still centered, and you don`t have to add HTML markup.
pre-line
- This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever
necessary to fill line boxes, and at new lines in the markup (or at
occurrences of "\a" in generated content). In other words, it’s like
normal except that it’ll honor explicit line breaks.
You can find more informations here about white-space:
http://reference.sitepoint.com/css/white-space
http://www.w3.org/TR/css3-text/#white-space
For an IE7 compatibility, you could also add on the parent container:
*white-space: pre /*FixIE7*/;
You need some holding block to hold your spans if you want to display it on top of another. This is the best I can do.
http://jsfiddle.net/NhVaF/5/
If you want to make it work without altering the html, then your best bet is to simply float: left; clear: left; like so:
span {
float: left;
clear: left;
color: #FFF;
padding: 30px;
}
display: block; will not work because it requires you to set a width (or else they'll fill the available space).
display: inline-block; will not work because still display on the same line.
I was just playing around with this too, and found my solution by simply placing <br> after each inline-block element. I know it's altering the html but only slightly!
If you want to create line breaks with CSS try using the :after pseudo class. Would something like this work?
div.class:after {
content:"\a";
white-space: pre;
}
break :after trick: https://stackoverflow.com/a/10934138/6586407
I'm having a problem with divs not expanding vertically where there are anchors with padding inside.
Since the explanation is not the best one, I've recreated problem here: http://jsfiddle.net/uF6KN/3/
Basically, I want blue anchors to have to same top coordinate as a blue button. I've tried somethings but got stuck. Any help would be appreciated.
I not really that proficient in CSS so I might be missing a simple thing.
Thanks!
#d_float_right a {display:inline-block;}
a {
float: right;
}
should fix it. changing the a from a inline to a block element. Setting display:block on a would also make it a block element but would put each on a newline
#d_float_right a {
display: block;
float: left;
}
http://glowing-fire-495.heroku.com/users/3
I was wondering if anyone knows why the tags in the yellow box is cut off like that on the right side?
How can I make it so it doesnt do that?
add to your css
#tagsDiv a {
white-space:nowrap;
}
Change the margin and display in#tagsDiv a to:
#tagsDiv a {
margin: 2px;
display: inline-block;
}
Tested with Firebug, looks alright. The code above will keep it from being cut off, and it'll space them out a little bit so they aren't top-to-bottom.
The tag is not cut off, there is just an (automatically inserted) line break in its text. Set
white-space: nowrap;
on the tag elements.
I'm trying to hide some text inside an <li> element using CSS by setting text-indent: -999px;.
For some reason this doesn't work when I set the direction of the document to "rtl" (right to left - my site is in Hebrew).
When direction is "rtl" the text still shows...
Anyone knows why, and a way around this?
Along with text-indent: -9999px try using display: block;. It solved for me.
Additionally, if you need the li elements to float horizontally (e.g. a horizontal menu), use float: left;.
What about setting direction:ltr on the elements you're trying to give negative text-indent?
Demo: jsfiddle.net/Marcel/aJBnN/1/
My problem was with text-align. In case you modify align mode of the element or parent element(s) wrapping it to left, you must give a negative index for text-indent. Otherwise you must give a positive value.
.case1{text-indent:-999px;text-align:left;overflow:hidden;display:block}
Otherwise
.case2{text-indent:999px;text-align:right;overflow:hidden;display:block}
Try setting text-alignment to match the direction in which you are indenting text.
For example, if you use LTR and want to indent text negatively, besides adding display: block, you should also add left alignment.
Not sure for RTL, but seems logical you should indent it positively and use right alignment.
I found the best way is to make the text a transparent color:
color: rgba(0,0,0,0);
Note:
This bug still exists in firefox 12 (text-indent value is ignored on rtl)
color: transparent;
or
font-size:0px;
You can use line-height specifying a large value, say 100px for a 30px high container.
only works if your container is limited in size. you may have to specifically set height if it isn't yet.
I prefer this solution:
.hide_text { text-indent: 100%; white-space: nowrap; overflow: hidden; }
The text-indent: -99px is an old trick, which is not the optimal way to hide text. Why not use visibility:hidden instead?
text-align: right; works for me
Add overflow hidden then it will work fine.
div{
text-indent: 100%;
overflow: hidden;
}
<div>
search
<input type="text">
</div>