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;.
Related
I want to have an icon (checkmark) behind a line with variable width.
if the line becomes too long, i want it to be truncated with ellipsis.
But the checkmark is supposed to stay AFTER the ellipsis
https://jsfiddle.net/Lkvt39re/
.inner {
width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
i've set the width to 80%, and want to have the :afterinserted ..well, after the ellipsis.
how can i do that?
Thanks
Try adding a ::before pseudo element instead, then style it to float right. This way, your pseudo content won't become trimmed out by the restrictions set to the element width.
CSS
.inner::before {
content: 'X';
float: right;
}
Alternatively
You can set the ::after pseudo element to the parent element .outer, then set the nested .inner element to display inline-block (allowing the pseudo element of .outer to fall after initial width of .inner) with a max-width declared; once this max-width is exceeded your overflow rule will apply, giving you the ellipsis but still keeping the pseudo element of .outer visible after the text-overflow.
The problem is trying to declare this pseudo element to an element that you've also declared width restrictions and overflow rules to. You'll need to declare the pseudo element outside of the element that will, at some point, begin trimming out content.
.inner {
width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inner::before {
content: 'X';
float: right;
}
.outer {
width: 200px;
}
/* Alternative */
.alternative .inner {
max-width: 80%;
width: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.alternative .inner.no-max-width {
max-width: none;
}
.alternative .inner::before {
display: none;
}
.alternative.outer::after {
content: 'X';
display: inline-block;
}
<div class="outer">
<div class="inner">
this is pretty longggggg
</div>
</div>
<br>
<p><strong>Alternative</strong></p>
<div class="alternative outer">
<div class="inner">
this is pretty longgggggggggggg
</div>
</div>
<div class="alternative outer">
<div class="inner no-max-width">
this is pretty long
</div>
</div>
Devman,
You need to give the pseudo element some shape and define it as either an inline-block or a block element to do so. You can then set the dimensions appropriate to your styling.
Check out this edit:
.inner {
width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position:relative;
/** give your container some extra space for the pseudo **/
padding-right: 25px;
}
.inner::after {
content: 'X';
color:red;
/** define it as a "block" element and add dimension **/
display: inline-block;
height: 1.0rem;
width: 1.0rem;
}
.outer {
width: 180px;
}
http://codepen.io/jonrandahl/pen/rLMKwR
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
The scenario I have here: http://jsfiddle.net/b2xLgkqu/4/ (approximate minimal reproduction of my actual usage scenario)
Basically, I have a base element with width: 100% which has three children - leftside segment, rightside segment and main text. The left and right side have a known width in rems, but it's completely fluid otherwise. The text-overflow works nicely in Chrome, IE11 and Chrome for Android, but not on the latest Firefox. I'm looking for something that would make it work there too, without breaking any of the other browsers. (I also can't use workarounds like hiding the main text with a background-color on the side elements due to the containing element having semitransparent background color, and I'd like to keep it that way.)
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.head {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
}
.left, .right {
width: 5rem;
padding: 0 0.1rem;
position: relative;
z-index: 1;
}
.left {
float: left;
}
.right {
float: right;
}
span {
position: relative;
z-index: 0;
}
<div class="head">
<div class="left">FOO BAR</div>
<div class="right">FOO BAR</div>
<span>
long text
<span style="color: red">that</span>
should end up
<b>wrapping with</b>
text overflow ellipsis blah blah more blogging here
</span>
</div>
You set some styles to .head but you should set them to .head > span instead:
.head > span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.left, .right {
width: 5rem;
padding: 0 0.1rem;
}
.left {
float: left;
}
.right {
float: right;
}
.head > span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="head">
<div class="left">FOO BAR</div>
<div class="right">FOO BAR</div>
<span>
long text
<span style="color: red">that</span>
should end up
<b>wrapping with</b>
text overflow ellipsis blah blah more blogging here
</span>
</div>
Also note it needs display: block in order to interact like you want with the floating elements.
Is there a way to achieve this whilst being responsive?
Right now the button inherits the height from the headline (its width also changes). I'd rather not have to set a fixed height on the button, or put it in a wrapper.
http://jsfiddle.net/frank_o/JfnjY/14/
I've tried with both table:
.container4 {
display: table;
}
.container4 h1, .container4 .button {
display: table-cell;
}
.container4 p {
display: table-row;
}
And flex:
.container1 {
display: flex;
}
.container1 .button {
margin-left: auto;
}
.container1 p {
/* Add something here to make the `p` go below the `h1` */
}
What should I do?
There could be many ways of realizing this layout. Here is one way of doing it.
Consider the following HTML snippets:
<div class="container container1">
<div class="button">Click me</div>
<h1>Table-cell lipsum</h1>
<p>This is how I want it, except the button shouldn't inherit any height.</p>
</div>
<div class="container container2">
<div class="button">Click me</div>
<div class="sub-wrap">
<h1>Table-cell lipsum</h1>
<p>This is how I want it, except the button shouldn't inherit any
height. Morbi consequat, purus nec suscipit luctus...</p>
</div>
</div>
and the following CSS:
.container {
border: 2px solid red;
margin: 20px;
}
.button {
padding: 5px 17px;
border: 2px solid;
display: inline-block;
white-space: nowrap;
float: right;
}
.container1 h1 {
background-color: beige;
overflow: auto;
margin: 0;
}
.container1 p {
background-color: pink;
}
.container2 .sub-wrap {
overflow: auto;
background-color: lightblue;
}
In both cases, I floated the button to the right and used display: inline-block to keep a shrink to fit width/height, and white-space: nowrap to keep the text on a single line.
In the first case, .container1, I used overflow: auto on h1 to keep the text from interfering with the button. The p will just be in normal flow below the title and button.
In the second case, .container2, I wrapped the title and paragraph in a block level element .sub-wrap which has overflow: auto, that way neither the paragraph nor the title wrap around the button.
See demo at: http://jsfiddle.net/audetwebdesign/Dap4M/
DEMO
You can keep the table-cell property but don't apply it directly on button class, instead make a wrap with table-cell & then define your button this way button wont have to apply full height!
HTML:
<div class="container container4">
<h1>Table-cell lipsum</h1>
<div class="button-wrap">
<div class="button">Click me</div>
</div>
<p>This is how I want it, except the button shouldn't inherit any height.</p>
</div>
CSS:
.container4 h1, .container4 .button-wrap {
display: table-cell;
vertical-align: top;
}
It's a good practice to keep the layout classes separate from the actual elements classes.