I have a fixed-width sidebar consisting of a bootstrap nav-list where some list elements have right-aligned labels.
For example:
<li>
abc_test_randomrandom
<span class="pull-right label">0000</span>
</li>
However, this doesn't work if the link is long. It expands to fill the whole line, and pushes the label to the next line.
I've put up a jsFiddle demo to demonstrate this behavior. EDIT: And now a gist too.
The desired behavior is abc_test_randomrandom and 0000 on the same line, with the long string wrapping to the next line if necessary. Is this possible?
Yes. Use a fixed width and give overflow: hidden; for the excess with text-ellipsis.
li a {width: 60%; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap;}
li span {width: 40%; display: inline-block;}
I am unable to open jsFiddle. So couldn't see the exact issue.
I think Praveen's solution is actually a better implementation, but to get the behavior originally requested, display: inline-block, word-wrap: break-word and setting the width fixes it.
li a {width: 70%; display: inline-block; word-wrap: break-word;}
In Bootstrap a pull-right is essentially just a wrapper for CSS float. You need to put the 0000 span before the abc_test_randomrandom in the markup and it should wrap the anchor to two lines as needed, so your floating element comes before the element it's floating around. You may need to set a margin-right of the anchor to be the width of your floated element. I can't get jsFiddle to load right now or else I'd give you a better example. I'll try checking back.
EDIT: I was able to get your jsFiddle to load.
If you move the spans before the anchors in your HTML and add this CSS, this works. If your text is literally going to have underscores instead of spaces then you'll need the word-wrap CSS that you mentioned in your own answer.
The benefit of this is it doesn't require CSS hacks (i.e. for display: inline-block) to work in older versions of IE, if that's a concern for your project.
.nav-list a { display: block; margin-right: 30px; }
Related
Im trying to do some horizontal layout of divs but get an unwanted "margin" after the divs.
http://jsfiddle.net/Yzxpu/
When I change the the markup and delete the spaces or line breaks the problem gets fixed for the horizontal spacing, but still there is vertical spacing under the divs. And the markup looks bad.
http://jsfiddle.net/Yzxpu/1/
I don't want to see any red (except for the far right, it will get fixed as the right-margin % gets set)
I'm using latest Chrome as web browser.
By adding: margin:0; and padding:0; to the CSS it fixes the vertical issue, because browers add their own default settings you would be advised to use a reset.css sheet to set everything back to 0.
The fiddle with the fix: http://jsfiddle.net/ynemx/
Reset CSS: http://meyerweb.com/eric/tools/css/reset/
TRY THIS
http://jsfiddle.net/Yzxpu/10/
CHANGE YOUR CSS
#t-newsAndInfo{background-color:red; overflow:hidden}
#t-newsAndInfo div {float:left;}
REMOVE "DISPLAY" FROM #t-newsAndInfo div
You could try to float:left the inner divs:
http://jsfiddle.net/Yzxpu/15/
#t-newsAndInfo{background-color:red; overflow:hidden;}
#t-newsAndInfo div {
background-color:lightyellow;
display: inline-block;
float:left;
position: relative;
width: 31.11111111111111%;/*((900-(30+30))/3)/900*/
height: 100px;
text-align: center;
/*margin-right: 3.111111111%;*/
/*margin-right: 2.99999999999%;*/
}
I have an option box filled with options, like this:
<div class="OptionBox">
<div class="Option">
<div class="AddRemoveIcon"></div>
<img src="images/users/user_1000000002.jpg">
<span class="Label">Student Name<span class="SubLabel">Student</span></span>
</div>
<div class="Option">...</div>
</div>
Styles are like this:
.OptionBox{
overflow: auto;
max-height: 200px;
max-width:300px;
display: inline-block;
}
.Option {
display: block;
}
.Option .AddRemoveIcon,
.Option img,
.Option .Label {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
I'm using inline-blocks because I like the vertical-align:middle, and the SubLabel span is not always present... But this problem occurs for float:left also...
My problem is when I have enough Options in the Option box to cause overflow-y. For whatever reason, the browsers size things correctly (ie, figure the width of each option and adjust the option box width accordingly), then add scrollbars. The result is that the widest options have their Label div bumped down a line because the scrollbars have removed X pixels from the Option box's width. When I switch to float:left for the children of an Option, the Label div wraps based on the scrollbars. In either case, the .OptionBox is never pushed to an optimum width for the widest option. The wrapping should only happen when the max-width is reached, right? Here's a fiddle of it.
What I'm after - and I'm sure I'm asking for the moon - is either a way to reposition scrollbars so they don't take away from the width of the OptionBox, or some magic CSS rule, which tells the browser to consider the scrollbars when sizing (kind of like how box-sizing:border-box tells the browser to consider padding/borders when setting the width of an element).
Any thoughts? Thanks in advance!
You should be able to fix this by setting your outer-most div to be overflow: hidden. That way you won't get the y-overflow and the scrollbar will not appear.
I'm pretty sure I saw some css to keep the scrollbar from coming up without this, but can't find it atm.
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 have an inline element with a line break in it. It has padding on all sides. However, the side padding on where the line break cuts the element is not there.
This is what i mean:
http://jsfiddle.net/4Gs2E/
There should be 20px padding on the right of tag and left of with but there isnt.
The only other way I can see this working is if i create a new element for every line but this content will be dynamically generated and will not be in a fixed width container so i dont see that working out. Is there any other way I can do this in css without any javascript?
I want the final result to look like this :
http://jsfiddle.net/GNsw3/
but without any extra elements
i also need this to work with display inline only as I want the background to wrap around the text as inline block doesnt do this
Is this possible?
edit, altered the examples to make what i want more visible:
current
http://jsfiddle.net/4Gs2E/2/
what i want it to look like
http://jsfiddle.net/GNsw3/1/
In some cases you can use box-shadow for a workaround.
Move the right and left padding of the element to its parent and add two box-shadows.
The result: http://jsfiddle.net/FpLCt/1/
Browser support for box-shadow: http://caniuse.com/css-boxshadow
Update:
There is also a new css property for this issue called box-decoration-break. It is currently only supported by opera, but hopefully more browsers will implement this soon.
Hope this helps
Found a solution for you, but it ain't pretty :)
Since you can't target the <br> element with css, you have to use javascript. Here's how you can accomplish what you want with jQuery:
// Add two spaces before and after any <br /> tag
$('br').replaceWith(' <br /> ');
Play with the number of elements to acheive your padding on both ends.
Here's an updated Fiddle demo:
http://jsfiddle.net/4Gs2E/8/
Maybe you can use float: left instead of display: inline:
http://jsfiddle.net/GolezTrol/4Gs2E/1/
Usually that is implemented by wrapping each word in an own SPAN which has border.
I just wanted to make css-animated menu for myself. Workaround I have found is to wrap your INLINE-BLOCK element (change in css if necessary, lets call it a span with such an attribute for purpose of this solution) into block element. Then I'm using margins of span as it was padding for the surrounding div.
div.menuopt {
margin: 10px;
padding: 0px;
padding-left: 0px;
overflow: hidden;
width: 500px;
height: 150px;
background: grey;
}
span.menuopt {
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 150px;
margin-top: 10px;
font-size: 25px;
}
Example:
http://jsfiddle.net/ApbQS/
hope it will help anyone
I've a big problem!
You know, a div default width is 100% (of the parent). And if its content width is more than 100% (100%=1440px), div shows content in multiply lines.
Now, if i want, the div shows its content in one line, what should I do? look at the simple code::
<div>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
......(more than 100 other div, with unknown width)
</div>
NOTE: I don't know the content width.
I tried display: inline; and display: inline-block; and display: table;. they didn't work.
NOTE 2: I tried display: -moz-box;. It works, but Only in FIREFOX!
Thanks ...
The simplest way is to use white-space: nowrap on the parent, and display: inline-block on the children:
See: http://jsfiddle.net/4Yv83/
I also added overflow-x: auto, because presumably you don't want this.
Just tell the text inside the div not to wrap.
div {
white-space: nowrap;
}
a few years passed but ... I think it would be better to set overflow to hidden, because we don't need to show all of children elements at once. we use this kind of styling in thumb-slide like components. so I suggest to set "overflow:hidden" to parent element.
/* for parent element */
overflow: hidden;