I am trying to use the Angular Material list with checkboxes but with text which needs to be truncated rather than word wrapped (due to UI space limitation). I have forked the example within the Angular Material site to show the problem. The text kinda truncates but not with an ellipse or as I was hoping/expecting. Could some css ninja help?
https://stackblitz.com/edit/angular-xqk8h8
Looks like:
I'm expecting each line to end with "..." before the checkbox.
I have the CSS of text-truncate: ellipsis and white-space: nowrap
Changes required were a sub div as below
<div class="text">
Another example of quite long text which will need truncating on many screens
</div>
</div>
And adding the below css makes the overflow work
.content {
display:flex;
}
.text {
flex:1;
min-width: 0px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Related
I have an Angular/Material side panel containing label/input control pairs. An example is below pairing a label with a mat-slide-toggle:
<div class="flex justify-between items-center">
<span class="mat-slide-toggle-content">
{{ 'StringReference' | translate }}
</span>
<mat-slide-toggle [ngModel]="booleanValue" (ngModelChange)="handleModelChange($event)" name="aToggle" color="primary">
</mat-slide-toggle>
</div>
Since some of the label text could be long, particularly in translated versions, I'd like to have a "backup plan" maintaining the layout but still making the label text accessible. The ellipsis works fine when the label is too wide and text-overflow: ellipsis is set.
Maintaining access to the whole string is my problem. I'd like to "tooltip-ize" the label text, floating it above the neighbor control on hover without relayout, showing the whole string. I can change the text-overflow setting, of course, and generally stretch the label to fit, but this causes a relayout of the control, which I don't like. Since I have hundreds of such labels, I don't want an HTML or JavaScript solution with tooltips or similar.
Any CSS-only thoughts that might work?
This might not be the perfect answer as your code snippet wouldn't render here, but I imagine it's just a side pullout kind of thing. Here's a potential, CSS-only solution that you could work with; I just used bootstrap columns to show cutoff and expansion:
Concept: Toggle styles on active state.
Example: https://stackblitz.com/edit/ellipsis-but-shown-on-active
The gruntwork would be in the two custom classes which I modeled for col-4 at a certain width:
.col-4-overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.col-4-overflow:active {
overflow: visible;
text-overflow: inherit;
background: cornsilk;
position: relative;
min-width: 66.66666666666666%;
margin-right: -180px;
z-index: 1;
}
You might be able to figure out a more elegant replacement for the margin-right and z-index values of the active state, I dunno. :)
Am trying to create an overview for blog posts with some first few words from the post then when clicked the full post opens but since I don't want to write any back end code for that am wondering if theres and HTML feature for that.
Update
I am not asking how to handle overflows like I see in the answers. Am asking if theres a construct in HTML that can allow one show like 50 words if for example there where a thousand just like and overview.
Here are two mixins (on .sass):
=ellipsis
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
=ellipsis-multi($lines: 2)
overflow: hidden
display: -webkit-box
-webkit-line-clamp: $lines
-webkit-box-orient: vertical
and you're using it:
.title
+ellipsis-multi(3)
Or just in css
.title {
overflow: hidden
display: -webkit-box
-webkit-line-clamp: 3
-webkit-box-orient: vertical
}
<div id="greetings">
Hello universe!
</div>
#greetings{
width: 100px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
}
If browser is compatible, you should get something like
Hello univ…
showing on page.
Ref: http://www.w3schools.com/cssref/css3_pr_text-overflow.asp
I have a single-line fixed-width container div with two variable-width span inside. Any overflow of the first span should be hidden with an ellipsis. The second span floats on the right and should be shown in full. Please see this Fiddle:
<div class='container'>
<span class='left'>Long long variable stuff</span>
<span class='right'>Changing stuff</span>
</div>
I want the first span's width to dynamically adjust according to the width of the second span so that both span stay on the same line. How can I do that?
You can use Flexbox, so with flex: 1 on .right, .left will adjust its size and overflow will be hidden.
.container {
width: 200px;
display: flex;
border: 1px solid black;
}
.left {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.right {
flex: 1;
white-space: nowrap;
}
<div class='container'>
<span class='left'>Long long variable stuff</span>
<span class='right'>Changing stuff</span>
</div>
I don't think there's any way for CSS to dynamically know the length of an element without javascript. If you're looking for a purely CSS solution you're going to need to give it some direction in order for it to know the widths you want. Visually, that might be a bit of a compromise for you, but it will allow you to ensure that everything is always on one line.
For the solution I'm about to propose to work you need to know one width of the two. In this case I'm going to say that you can make a best guess of the "changing stuff" on the right.
Your first problem is that spans are inline elements by default - not inline-block. In order to get the overflow text property to work, you need to use it with an inline-block or block element.
The next piece is to use calc. Calc excepts mixed measurements so you can subtract an exact pixel value off of a percent. This works really well for responsive layouts.
I've created an updated version of your plunker to illustrate:
https://jsfiddle.net/n19ddahb/5/
I have the following markup in a table cell:
<td class="name">
<img width="22" height="22" src="http://res.cloudinary.com/radium/image/upload/c_fill,g_face,h_22,w_22/v1/default_avatars/large.jpg">
<div class="editable" contenteditable="true">
This is a very long piece of text we want to use an ellipsis with
</div>
</td>
I have the following style to add an ellipsis to long text in a table cell:
table tr td.name {
max-width: 220px;
background-color: white;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
margin: 0 !important;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Here is a jsbin that shows it working.
It works in most browsers but We have to support IE11 and in IE11, it cuts off all the text and just shows the ellipsis.
The problem seems to be that the table cell contains div that is contenteditable and turning that attribute to false makes everything display fine but we want these cells to be editable so we need a workaround.
Is it possible to make this work in IE11?
Your use of ellipsis on a parent container of a contentEditable also doesn't work for me in Safari, the ellipsis ends up inside the editable content:
I expect this is a conflict of features that were never really designed to work together. You would be better off having a "read-only" view of the ellipsised (elipsed?) content in the table cell, and open a pop-up editor when someone clicks on it.
If you really must have the text editable inside the cell, you could toggle between read-only ellipsis and contentEditable modes in javascript.
This jQuery example works in IE11 and Safari (other browsers not tested). The caret is jumped to the end on focus because the contentEditable div was not able to observe the position of the cursor at the time the click action occurred.
Your code actually works in my IE11 ... Removing the white-space: nowrap; breaks the functionality in all browsers.
You can try to remove the white-space: nowrap; property and that should do the trick.
JSBIN DEMO
The other option is to increase the width like this:
max-width: 500px;
JSBIN DEMO
I have a label in html document, it has a fixed width but when the text exceeds the label's width it goes to 2nd line, I want to the text to fit in given width, no matter if it doesn't show the starting text..
Here is the code
<div style="width:50%">
<label id="mlbl" style="width:50%;">text</label>
</div>
<button id="mbtn">click</button>
Script:
$('#mbtn').click(function() {
$('#mlbl').text('asdasda gfgfg ad ad asd ad asd asd ad ad ');
});
Here is the Fiddle http://jsfiddle.net/rd79bpwn/
Then simple use white-space: nowrap:
fiddle
Take a look here white-space-prop
Adding:
label{
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
}
You can get the desire effect and also adding three dots to avoid cutting the text abruptly by adding the text-overflow: ellipsis; attribute.
Note: text-overflowonly works in one line texts (Not multiple line).
TEST
UPDATE:
So you want to always show the end part of the text no matter what and the initial part that overflows should be hidden. Like this?
TEST
try this
#mlbl
{
overflow : hidden;
width : 100%;
}