This question already has answers here:
Why does my image have space underneath?
(3 answers)
Closed 7 years ago.
I have several div (class="badge") to display in the vertical. Not sure why I got extra space between 2 div in FF and IE (Chrome works fine).
I need them to display either no space or equal space in all browsers.
http://jsfiddle.net/2hxak/1/
HTML:
<div class="stat-badges">
<div class="badge">
<div class="stat-num">123456</div>
</div>
<div class="badge">
<div class="stat-num">0</div>
</div>
</div>
CSS:
.stat-badges {
text-align: center;
width: 55px;
}
.badge {
display: inline-block;
padding: 2px 4px;
color: #ffffff;
vertical-align: baseline;
white-space: nowrap;
background-color: #999999;
}
.badge .stat-num {
max-width: 30px;
min-width: 20px;
padding: 3px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
The space will disappear if I remove overflow: hidden;. I keep overflow: hidden with ellipse to crop long text.
Change vertical-align: baseline; to vertical-align: top; in your badge class rule.
jsFiddle example
display: inline-block; is messing this up. Use float: left; instead (possibly with clear: left; to make sure every badge is on a new line). (jsFiddle)
Related
This question already has answers here:
Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
(5 answers)
Why does margin-top work with inline-block but not with inline?
(3 answers)
Closed 3 years ago.
This may be basic but i read in a book that to center something inside a div you should :
margin-left: auto;
margin-right: auto;
width:70%;
so you give it a width and set auto margin.
With button it will not work and I also need to add this to make it work :
display: block;
Why in this case we need it block ?
inline/inline-block elements can't have auto value for margin.
If you want to center button without making it a block, you can use text-align: center on it's parent.
Also, button don't have to be a block if it's being centered by a flex/grid parent.
I added a few examples below.
.wrapper-center {
padding: 20px;
border: 1px solid blue;
text-align: center;
}
/* ----- */
.wrapper {
padding: 20px;
margin-top: 20px;
border: 1px solid red;
}
.centered-button {
display: block;
margin: 0 auto;
}
/* ----- */
.flex-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
padding: 20px;
border: 1px solid green;
}
<div class="wrapper-center">
<button>Test</button>
</div>
<div class="wrapper">
<button class="centered-button">Test</button>
</div>
<div class="flex-wrapper">
<button>Test</button>
</div>
Display: block
This gives the section or div a whole part of the page to itself, starting from what is essentially a new line and taking up the width of the page. Margin and width statement only affect it because of this. Inline or otherwise don’t have this property requirement due to the fact that their properties become relative to other elements on the same line
I want to have various tags in a container and have them display ellipsis when the tag text is too big (i.e. when it would stretch beyond the width of the container). The problem I am facing is that in Safari, the ellipsis are displayed even though the tag has space to display the full content.
This is the code that shows what I'm trying to achieve:
.tag {
height: 30px;
background: #F67;
line-height: 30px;
display: block;
float: left;
max-width: calc(100% - 20px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 5px;
margin: 5px 5px 0;
border-radius: 16px;
}
.content {
float: left;
max-width: calc(100% - 20px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon {
float: right;
background: blue;
width: 20px;
text-align: center;
color: white;
text-decoration: none;
}
.container {
border: 2px solid blue;
width: 300px;
height: 400px;
padding: 10px;
}
<div class="container">
<div class="tag">
<span class="content">Some tag</span>
X
</div>
<div class="tag">
<span class="content">Some tag</span>
X
</div>
<span class="tag">
blahbsalkfnewijfnewifbwiefnbijfneifjnweifniwjenfewi
</span>
<div class="tag">
<span class="content">Some tags</span>
X
</div>
</div>
If you're running the snippet above in Safari(v8.0.8 is the one I am using) you can see the last tag shows ellipsis even though it still has space to stretch and display the full text. If you can't see what I am talking about here is a screenshot of the issue:
text-overflow problem on safari image
Small mention about the 'X' is that it is intended as an icon someone could click on and delete the tag, but that functionality is not the subject of this question.
I'm using this trick: adding a non-break space right after the text. You can add it directly into your html, like <div class="ellipsis">Test </div> or you can use the :after pseudo element. Here's the .ellipsis class that I'm using:
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.ellipsis:after {
content: "\0000a0";
display: inline-block;
width: 0;
}
The use of :after has another advantage, it's hidden by setting width: 0;, so you won't notice a larger gap between this element and the thing next to it (another element or a border).
When you remove the following lines from your .content element it works fine by me.
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
example: http://codepen.io/WartClaes/pen/ZQxaKW?editors=1100
Edit: although when looking further I see that you don't always use the same HTML structure? Which results in the double text overflow declaration. Isn't it possible to always use the same structure?
You need to add a "width" for the text, down to the text-overflow:
width: 100%; /Or the size you need/
It works for me in the safari 13.
So I have a simple markup with fixed-width container, one floating right badge and text inside container. I would like text to be cutted with ellipsis when it reaches badge, but it won't work for Firefox.
<div class="container">
<span class="to-right">toRight</span>
<span class="left">Cutting text very very long</span>
</div>
Css file:
.container {
border: solid 1px silver;
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.to-right {
float: right;
background-color: green;
}
Why and what should I do to make it work consistent?
http://codepen.io/huston007/pen/gPLOaq
I have a content area that should behave in the following way:
Content is centered vertically if there's no vertical overflow (currently achieved via display:table/-cell)
No scrollbar is displayed unless there is vertical overflow
the height of the containing div never changes
I've only been able to satisfy the first point - fiddle:
http://jsfiddle.net/PTSkR/125/
Here's my html:
<div class="row-fluid card-box">
<div class="span4 side-study-box">
<div class="side-box-content">
<pre class="text-content-saved">TEST
TEST</pre>
</div>
</div>
</div>
Css:
.side-study-box {
background-color: white;
color: black;
border: 1px solid #3D6AA2;
text-align: center;
height: 160px;
max-height: 160px;
display: table ;
margin: 0px ;
margin-left: -1px;
position: relative;
overflow-y: scroll ;
}
.side-study-box .side-box-content {
width: calc(100%);
height: 160px;
float: right;
display: table;
overflow-y: scroll ;
background-color: white;
}
/*#region CONTENT AREAS */
/*#region TEXT CONTENT */
.side-study-box .text-content-saved {
width: calc(100%+29px);
font-size: 24px;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 160px !important;
max-height: 160px ;
background-color: white;
padding: 0px ;
margin: 0px ;
border: 0px ;
overflow-y: scroll;
}
Unfortunately I can't use js as part of the solution... is this possible with only css?
You can use overflow:auto; to achieve the second point and set the following:
word-break: normal !important;
word-wrap: normal !important;
white-space: pre !important;
fiddle: http://jsfiddle.net/PTSkR/134/
Keep in mind that since you are using a pre tag, it means that all the white spaces and line breaks formatting counts so any white space or extra line could cause the overflow and you might miss that. See here
I'm missing something obvious today, guys - would appreciate some help please.
I've got a horizontal row of DIVs inside another DIV. I want the third DIV to show as partly hidden by the top DIV. But it isn't showing at all.
Here's the CSS:
.outer {
background: #800;
height: 90px;
width: 300px;
overflow: hidden;
white-space: nowrap;
}
.label {
float: left;
display: block;
background: #888;
width: 75px;
height: 50px;
margin: 10px;
padding: 10px;
line-height: 50px;
font-size: 45px;
text-align: center;
}
Here's the HTML:
<div class="outer">
<div class="label">1</div>
<div class="label">2</div>
<div class="label">3</div>
<div class="label">4</div>
</div>
Thanks for your help!
I'm missing something obvious today, guys - would appreciate some help
please.
The "obvious" thing you're missing is that the third and fourth inner divs are dropping underneath because there is not enough horizontal space. For instance, if I check it using Chrome's Developer Tools:
The simplest way to fix this is to switch from float: left to display: inline-block, with white-space: nowrap (you already have it!) on the containing element:
http://jsfiddle.net/rGfNY/
you need to wrap them in a new div, give the div a width, (bigger than your outer div) it will be cut off by the outer div's overflow hidden.
on thing to note: the width of that inner div is not adjusting with the content, either you specifically set it very high, or you have to calculate it to the content either just put it hardcoded in css, or use javascript.
html:
<div class="outer">
<div class="inner">
<div class="label">1</div>
<div class="label">2</div>
<div class="label">3</div>
<div class="label">4</div>
</div>
</div>
css:
.outer {
background: #800;
height: 90px;
width: 300px;
overflow: hidden;
white-space: nowrap;
}
.inner {
width: 460px;
}
.label {
float: left;
display: block;
background: #888;
width: 75px;
height: 50px;
margin: 10px;
padding: 10px;
line-height: 50px;
font-size: 45px;
text-align: center;
}
working example:
http://jsfiddle.net/f2wpm/