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%;
}
Related
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;
}
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 case which I'm trying to solve with pure CSS, but I somehow feel like it is not possible (or at least not without using tables).
Imagine following layout
<div class="parent">
<span class="name">
Some name
</span>
<span class="number">
123
</span>
</div>
I want the parent to be of a fixed width and then have name followed inline by number. However, if the name is too long, I would like it to truncate (using ellipsis), but the number should remain and be moved to the right until it reaches the border of parent.
Here are few examples to illustrate.
Short text 1 |
Longer text 12 |
Very, very lon..123|
Notice that also the number text can have variable length (thus the width can't be fixed).
Any ideas?
CSS Flexbox layout does a good job of making this sort of thing a breeze. You can read about the details on using it on the MDN article "Using CSS Flexible Boxes", but here is a simple example of how it can solve your layout:
.parent {
display: flex;
width: 8em;
}
.name {
/* Make width shrinkable beyond width of content */
flex: 0 1 auto;
/* Make sure text doesn't wrap or push beyond element boundaries */
overflow: hidden;
white-space: nowrap;
/* Show an ellipsis when text cuts off */
text-overflow: ellipsis;
}
.number {
/* Make width inflexible */
flex: 0 0 auto;
}
You can see it in action in this example JSBin.
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/