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
Related
I'm trying to draw a square next to a multiline piece of text in a fixed width container for a color legend. However, I'm running into the issue that even though the text and the square should fit in the container, the square is getting squashed into a rectangle as the text element takes up more horizontal space than it should. Is there a way I can (preferably without hard-coded magic numbers) ensure that the p element only takes the horizontal space it needs to display the text?
Relevant MWE:
html:
<div class="div">
<div class="square">
</div>
<p class="text">
Lorumipsum dolorsitamet
</p>
</div>
css:
.div {
width: 140px;
display: flex;
align-items: center;
outline: 1px solid blue;
}
.square {
width: 25px;
height: 25px;
background-color: red;
}
.text {
margin-left: 2px;
outline: 1px solid red;
}
Fiddle:
http://jsfiddle.net/6jxtp8k5/59/
Use min-width and min-height instead of using width and height. This will ensure that the square will always have the specific width and height.
.square {
min-width: 25px;
min-height: 25px;
background-color: red;
}
I have this right now:
#outer-div {
border: 1px dashed red;
line-height: 50px;
width: 350px;
}
.inner-div {
border: 1px dashed red;
float:left;
height: 50px;
width:80px;
}
#title {
/*white-space: nowrap;*/
}
<div id="outer-div">
<div class="inner-div"></div>
<div class="inner-div"></div>
<span id="title">Random long text not to break<span>
</div>
and it looks like:
and I'd need this:
Tried solutions from other threads but they not work as this. white-space: nowrap moves the entire span to the next line.
Here is a working code: https://codepen.io/neptune01/pen/ppMyEQ
Can this be done using only css?
It's a bit tricky, but doable using Flexbox (as is almost anything), text-overflow: ellipsis, and, yes, white-space: nowrap :
Bonus: you don't need line-height or float.
#outer-div {
border: 1px dashed red;
width: 300px;
display: flex;
align-items: center;
}
.inner-div {
border: 1px dashed red;
height: 50px;
width: 80px;
flex-shrink: 0;
}
#title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
border: blue dashed 1px;
}
<div id="outer-div">
<div class="inner-div"></div>
<div class="inner-div"></div>
<span id="title">Random long text not to break</span>
</div>
You can do it with the white-space: nowrap together with the text-overflow: ellipsis and overflow: hidden, also the #title span needs to be displayed as block or you can just use another div instead:
#outer-div {
border: 1px dashed red;
line-height: 50px;
width: 350px;
}
.inner-div {
border: 1px dashed red;
float: left;
height: 50px;
width: 80px;
}
#title {
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<div id="outer-div">
<div class="inner-div"></div>
<div class="inner-div"></div>
<span id="title">Random long text not to break</span>
</div>
Assign id just to your parent div and not to other elements present inside.
white-space:nowrap makes contents present inside applied div to not wrap them next line, so you need to add overflow:hidden too, which hides content from overflowing outside .title or targeted div, thus this hides content and then apply text-overflow:ellipsis to get (...) in end of overflowed content.
#outer-div {
border: 1px dashed red;
line-height: 50px;
width: 350px;
}
.inner-div {
border: 1px dashed red;
float: left;
height: 50px;
width: 80px;
}
.title {
display: block; /*Changed display to block*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<div id="outer-div">
<div class="inner-div"></div>
<div class="inner-div"></div>
<span class="title">Random long text overflows content out of box.</span>
</div>
I have a panel with information and above it there's additional information displayed, but I'd like it to be subtle and a one-liner, so when the text that's contained in it is wider than the parent's width, it should be truncated.
See jsfiddle; this is a mock of what I am after.
This is the HTML for that extra information:
<div class="main-container">
<div class="extra-information">
<span>Information</span> –
<span>When this is too long it should be truncated</span>
</div>
<div class="main">Main panel</div>
</div>
And this is the CSS I am trying so far:
.main-container {
width: 350px;
// ...
}
.main {
// ...
}
.extra-information {
display: block;
box-sizing: border-box;
width: inherit;
max-width: inherit;
white-space: nowrap;
text-overflow: ellipsis;
}
Check it out in another jsfiddle.
You may use text-overflow: ellipsis with overflow: hidden in CSS
text-overflow
The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.
Other possible values for this property are:
clip : Default value. Clips the text
ellipsis : Render an ellipsis ("...") to represent clipped text
string : Render the given string to represent clipped text
overflow
The overflow property specifies what happens if content overflows an element's box.
This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.
Note
The overflow property only works for block-level elements.
.main-container {
width: 350px;
}
.extra-information {
white-space: nowrap;
overflow:hidden !important;
text-overflow: ellipsis;
}
<div class="main-container">
<div class="extra-information">
<span>Information</span> –
<span>When this is too long it should be truncated</span>
</div>
<div class="main">Main panel</div>
</div>
Something like this?:
.main-container {
font-family: Calibri, serf;
width: 350px;
padding: 10px;
border: 1px solid #ccc;
}
.main {
border-top: 2px solid #ccc;
margin-top: 10px;
padding-top: 10px;
}
.extra-information {
display: block;
box-sizing: border-box;
width: inherit;
max-width: inherit;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<div class="main-container">
<div class="extra-information">
<span>Information</span> –
<span>When this is too long it should be truncated</span>
</div>
<div class="main">Main panel</div>
</div>
Just added overflow: hidden;.
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.
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)