I am trying to achieve similar thing as SO with tags.
It looks great, but the problem is that I want to have a maximum width of each tag, so if a the length of the the tag, is too big, it will be truncated.
I can achieve it with:
.label{
width: 50px;
float: left;
overflow: hidden;
}
Ok, it works, but when I do this, my number is not on the same line as label.
How can I achieve the same effect as on the first fiddle, but with maximum width.
This should to do the trick:
.label {
display: inline-block;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
JSFiddle demo.
What I've done here is dropped the float: left and replaced it with display: inline-block. I've then given it an ellipsis text-overflow property to make it look nicer, and set the vertical-align to middle to get it in line with the .multiple element. Oh, and I've replaced width with max-width to stop smaller tags being the same size.
Example Usage
Here is an example with multiple tags (each are on a new line intentionally): JSFiddle.
Obviously you can adjust the max-width accordingly.
You can give
float:left;
to span.multiple as well so the span and label come in the same line.
.multiple{
float:left;
}
You can add line-height to both of them
.label, .multiple {
line-height: 15px;
}
Here is jsFiddle link.
.label{
max-width: 150px;
float: left;
overflow: hidden;
}
Related
In my fiddle here, I would like to split the text into 2 lines. The splitting needs to be like in the image below:
The splitting needs to be according to the width of the image.
I tried playing with word-break but it seems that it needs width of the container to be defined.
Is there a way to fix this using CSS only?
jsFiddle
You can use the display: table-caption property to make an item fit the width its container already had without stretching it, and reset the white-space to make sure the lines actually break when it gets too wide:
span.item a{
text-decoration: none;
color: grey;
text-align: center;
display: table-caption;
white-space: normal;
}
Then add a vertical-align: top to your span.item to make them line up nicely.
Fiddle: http://jsfiddle.net/n4c24cg7/4/
Answer inspired by this answer.
) this should do the trick:
div.items div{
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.container {
white-space:nowrap;
}
.item {
width: 1%;
display: inline-table;
padding:0px 15px;
}
a {
height: auto;
overflow: hidden;
text-decoration:none;
white-space:normal;
}
http://jsfiddle.net/n4c24cg7/6/
the padding is only cosmetic, by the way, can be adjusted at will. it might also be worth looking into the 'ellipsis'property to stick to the layout: Setting a fixed HEIGHT on the boxes will chop off the text in this scenario... Depending on what browsers you are counting on and the size of the text/caption coming after the images -- right now they align with the highest ;) hope this helps
You can find solution from here
<div class="img">
<img src="image/path/img" alt="">
<div class="desc">Add a description of the image here blah blah blah</div>
</div>
css
div
{
width:100%;/*or specify width*/
}
div.img {
width:100%;
}
div.desc {
margin: 5px;
padding:5px;
word-wrap:break-word;
}
demo
I have one of my <a> links set to inline-block and there is some space added to the bottom of the containing div. I am not sure how to get rid of this and was wondering if someone could help.
Here is a fiddle: http://jsfiddle.net/RQ69r/1/
Thanks in advance.
You can fix that adding the following style to the inline-block element:
vertical-align: middle;
Demo
Why dont you change it to display: block; ?
Check the updated fiddle:
http://jsfiddle.net/RQ69r/3/
When you want more <a> elements next to each other (horizontal), you could use list-items and / or float:left;
This is the default behavior of inline-block elements. Set the parent div font-size: 0px;
DEMO http://jsfiddle.net/RQ69r/7/
.row_20 {
width: 20%;
font-size: 0px;
}
And set the correct font-size of the child element
.header .logo {
font-size: 13px; <-- set font size
height: 45px;
width: 100%;
display: inline-block;
background: blue;
}
What is wrong with this? Ive read a couple of posts which suggest that in order to have inline-block elements all on the same line with only overflow-x, the following CSS is all that is required on the parent:
div {
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
}
This is my CSS, straight from my firebug for both the parent, and the elements which i need on the same line. The elements are wrapping with only a vertical overflow. Im confused. Any suggestions?
.elementsRequiredOnSameLine {
background: none repeat scroll 0 0 white;
display: inline-block;
float: left;
height: 10em;
text-align: center;
width: 6em;
}
.parent{
display: inline-block;
margin: 10px auto;
min-height: 12em;
overflow-x: scroll;
padding: 10px;
white-space: nowrap;
width: 95%;
}
Using float: left on the elements will cause them to ignore the nowrap rule. Since you are already using display: inline-block, you don't need to float the elements to have them display side-by-side. Just remove float: left
Was because of the float:left;, once i removed that, fine. Spotted it after typing out question sorry.
I'm trying to develop a horizontal web page, with fixed height and variable width.
In order to get it, I need a row of floating <div>s to expand the <body> width.
|------------- body --------------| /* variable width */
|-div-| |-div-| |-div-| |-div-| /* fixed width */
The following code doesn't seem to work:
body{
height: 40px;
}
div{
width: 2000px;
height: 20px;
background: red;
margin: 10px;
float: left;
}
http://jsfiddle.net/7cS2R/12/
Is is possible to do so without using javascript?
Block elements expand to the full width of their parent-element's width. To make them respect their childrens with you can either declare:
display: inline-block;
or
position:absolute;
on your body-element.
EDIT: after you clarified your question - simply add the white-space declaration to your body:
white-space:nowrap;
Demo
Try this:
body{
height: 40px;
display: inline-block;
}
http://jsfiddle.net/7cS2R/6/
I'm looking an elegant way to position two divs one besides the other without line wrapping. The first div is an icon the second a text of unknown size.
They should not break in two lines but hide if not enough place. I'm trying with this example, but it doesn't work.
There is a similar question, but's it's not the same scenario as size is unknown.
Help is appreciated
Write like this:
.container {
white-space: nowrap;
}
.d1,
.d2{
display: inline-block;
*display:inline;/*for IE 7 */
*zoom:1;/*for IE 7 */
vertical-align:top;
}
.d1 {
background-color:#ff0;
}
.d2 {
background-color:red;
}
Check this http://jsfiddle.net/xcSXA/5/
float: left does not give you, what you need.
Try display: inline
http://jsfiddle.net/xcSXA/3/
Instead of floating your divs, display them as inline-block so they don't wrap. Also, set the container's "white-space" style to "nowrap" to also prevent line wrapping.
HTML
<div class="container">
<div class="d1">icon</div>
<div class="d2">This can be very very very very large.</div>
</div>
CSS
.container {
white-space:nowrap;
overflow:hidden;
width: 100px;
}
.d1 {
display: inline-block;
background-color:#ff0;
}
.d2 {
display: inline-block;
background-color:red;
}
Working Example: http://jsfiddle.net/C4Wfa/
.d1 and .d2 you have to give a certain width, but you gotta make sure that the width of both .d1 and .d2 together (+ margins and paddings) isn't bigger then the the container class, else they won't be able to be set next to each other.
I think, the following CSS is, what you need.
.container {
display:inline-block;
overflow:hidden;
white-space: nowrap;
}
.d1 {
display: inline-block;
background-color:#ff0;
}
.d2 {
white-space: nowrap;
display: inline-block;
background-color:red;
}
You can try it with
float: left;
and create an outer div with this style:
height: 1%; overflow: hidden;
See here: http://www.google.de/imgres?imgurl=http://www.mikepadgett.com/legacy/images/client_images/float_problem.gif&imgrefurl=http://www.mikepadgett.com/technology/technical/alternative-to-the-pie-clearfix-hack/&usg=__NW1NVgWIKW-rBh0Cp60ouDdIGvg=&h=300&w=412&sz=6&hl=en&start=0&sig2=4nJ8a7o2JcYBdlBaPaL3VA&zoom=1&tbnid=raa9wIX8T8PbWM:&tbnh=103&tbnw=141&ei=uGlLT9j4MsWEhQfl7eGYBw&prev=/search%3Fq%3Dfloat%2Bleft%26um%3D1%26hl%3Den%26sa%3DN%26biw%3D1920%26bih%3D1075%26tbm%3Disch&um=1&itbs=1&iact=rc&dur=152&sig=110912085308513740608&page=1&ndsp=57&ved=1t:429,r:1,s:0&tx=64&ty=50