I've got a string like this:
But I need to add three dots after string only with length more than 40, how can I do it?
As commented, you should use CSS to achieve this. This will ensure your data is not change and UI aesthetics are maintained.
Also every character has different width. Its better to check on total width than characters length.
.limit {
width: 200px;
text-overflow: ellipsis;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
width: 100px;
white-space: nowrap;
}
<input type="text" class="limit">
<div class="ellipsis">
This is a test for ellipsis using CSS
</div>
This is written in ES6, but this filter will let you do what you need:
import * as _ from 'lodash';
/* #ngInject */
export default () => (input, length) =>
_.size(input) > length ?
`${input.slice(0, length)}...` : input;
Then you can use that as a filter:
<span data-ng-bind="foo | ellipsis-filter: 20">
Limits it to 20 characters, adds the ellipsis for you.
If you want to solve it in the template without creating a filter yourself you could just do this:
Not as fancy as creating your own filter but should do the trick.
Related
I am new to JavaScript and I learnt how to use JSX to render HTML code. I am passing a string in the Span element in HTML however I want only the last 6 characters of the information to show up on the webpage. So I am trying to use Ellipsis property to do but the number of characters is not reducing. I need the data.id to be only the last 6 characters of the passed string. How can I do this? Can I do this using the ellipsis property or should I use some JavaScript function inside the JSX? I am not sure why the CSS is not working. Can anyone please help?
.branchText {
color: var(--secondaryHeader);
max-width: calc(100% - 16px);
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
<span className={styles.branchInfoWrapper}>
<span className={styles.branchName}>Master :</span>
<span
className={classNames(styles.branchText)}
ellipsisText
title={data.get('id')}
>
{data.get('id')}
</span>
</span>
data.id is what I need to display next to the Master: text. It needs to be only the last 6 characters.
Not sure if you can show only 6 last characters with CSS, it's normally based on width, so you can use JavaScript:
This will only show last 6 characters:
<span>
{data.get('id').substr(data.get('id').length - 6)}
</span>
Using a ternary operator if statement, it will add ellipsis if id has more than 6 characters.
<span>
{data.get('id').length > 6 ? "..." + data.get('id').substr(data.get('id').length - 6) : data.get('id')}
</span>
Just do npm i react-lines-ellipsis --save and use like this
import LinesEllipsis from 'react-lines-ellipsis'
<LinesEllipsis
text='long long text'
maxLine='3'
ellipsis='...'
trimRight
basedOn='letters'
/>
I'm trying to streamline CSS styling. Is it possible to use a number in the CSS class as a value to be applied? Like parameters in a PHP or JavaScript function
Ex.
<div class="pad-left-35">Div with 35px padding left </div>
<div class="pad-left-10">Div with 10px padding left </div>
.pad-left-[value] { padding-left: 'value'px; }
.color-[value] { color: 'value'; }
As of now, it's impossible, and it will probably always be. However, when the new CSS drafts will be approved, you will be able do to a similar thing with custom attributes. For example, if you have <div padding="35">...</div> you will be able to set its padding like this:
div /* or whatever selector you would like to use */ {
padding: attr(padding px);
}
You can read more about this here. Unfortunately, this draft has not been approved yet. So, until then, you will either set some standard paddings - like padding-4, padding-8, padding-12, ... - or use a SASS/SCSS foreach loop, like this:
#for $padding from 1 to 13 {
.padding-#{$padding} {
padding: $padding + px;
}
}
I'm not sure if this is what you're looking for, however, using :root, you can add parameters as shown in the code below, hope this helps.
:root {
--main-bg-color: coral;
--padding: 5px;
}
#div1 {
background-color: var(--main-bg-color);
padding: var(--padding);
}
This is in my client's project requirements. I am just giving example with margin only. if there are two CSS classes and have properties like.
CSS
.selector-1 {
margin-top: 20px;
}
.selector-2 {
margin-top: 30px;
}
HTML
<div class="selector-1 selector-2">content</div>
We all know it will overwrite the properties from one class to another, but in this case, a client wants to add both margin-top and apply. So he is expecting margin-top:50px.
I know there is no way to do it in CSS.
Can anyone suggest something? I want to avoid using JS/jQuery. However, at the end, I can use, if it is possible to do it.
you can not do it with pure css anyway, because for do it you must get margin-top of classes and sum them.the problem is right here you can't access to another class through pure css.
but you can do it with javascript.
Why don't you:
.selector-1.selector-2 { margin-top: 50px }
Will give you 50px margin-top as both .selector-1 and .selector-2 margin-top's are combined to one margin-top called .selector-1.selector-2.
You can't do it with pure CSS, so here is the solution with jQuery https://jsfiddle.net/z5pdt17j/1/
$('body').append('<div class="selector-1 hidden" id="div1"></div><div class="selector-2 hidden" id="div2"></div>');
var tmargin = parseInt($('#div1').css('margin-top')) + parseInt($('#div2').css('margin-top'));
$('div#divTest').css({
'margin-top': `${tmargin}px`
});
$('#div1 , #div2').remove();
.selector-1 {
margin-top: 20px;
}
.selector-2 {
margin-top: 30px;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selector-1 selector-2" id="divTest">content</div>
Hope this will help you.
try this with jquery : easy solution
<div data-margin1="20" data-margin2="30" class="content">content</div>
(function(){
let content = $('.content');
let margin1 = content.data('margin1');
let margin2 = content.data('margin2');
content.css({'margin-top':margin1+margin2});
}())
This question already has answers here:
Setting a max character length in CSS
(15 answers)
Closed 2 years ago.
I have the following mark-up:
<h5>
I am a very long title and I need to be shortened
</h5>
How can I make it so that if the h5 text is above a certain number of characters, I get rid of the other characters and replace them with a "..."?
This should work. You have to display the inline element as a block.
Edit: Just realized you want to add dots if the H5 exceeds a number of characters, not if it exceeds a width. I think to do that you will need to use JS - check out the other answer for that.
h5 {
display: block;
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
color: red; /* This needs to match the color of the anchor tag */
}
a:link {
color: red;
}
<h5>
I am a very long title and I need to be shortened
</h5>
You can do this:
var name = $('a').text();
if (name.length > 20) {
var shortname = name.substring(0, 20) + " ...";
$('a').replaceWith(shortname);
}
If you want to use javascript, you can extend String object by prototyping:
String.prototype.limit = function(length) {
return this.length > length ? (this.substring(0, length) + '...') : this;
}
var str = 'qwertyuiop';
console.log(str.limit(5)); // qwert...
<h5 id="expansion">
<a id="myLink" href="javascript:void(0);">I am a very long title and I need to be shortened And Also I am a very long title and I need to be shortened</a>
</h5>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
if($('#myLink').text().length > 20){
var linkText = $('#myLink').text();
$('#myLink').html(linkText.substring(0,20)+"...")
$('#myLink').on("click",function(){
console.log("linkText :: ",linkText);
$('#myLink').html(linkText);
});
}
</script>
This one is working
<h5>
<a class ="one" href="javascript:void(0);">I am a very long title and I need to be shortened</a>
</h5>
<style>
.one
{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
display:inline-block;
width : 100px;
}
</style>
set the width according to your website design
I have a list of paths (for lack of a better word, maybe bread crumb trails describes them better). Some of the values are too long to display in their parent so I'm using text-overflow: ellipsis. The problem is that the important information is on the right, so I'd like the ellipsis to appear on the left. Something like this this ascii art:
----------------------------
|first > second > third |
|...second > third > fourth|
|...fifth > sixth > seventh|
----------------------------
Notice that the first row is short enough so it remains left aligned, but the other two are too long so the ellipsis appears on the left hand side.
I'd prefer a CSS only solution, but JS is fine if it can't be avoided. It's ok if the solution only works in Firefox and Chrome.
EDIT: At this point I'm looking for a work around for the bugs in Chrome that prevent it from rendering properly when a document is mixed RTL and LTR. That was all I really needed from the outset, I just didn't realize it.
How about something like this jsFiddle? It uses the direction, text-align, and text-overflow to get the ellipsis on the left. According to MDN, there may be the possibility of specifying the ellipsis on the left in the future with the left-overflow-type value however it's considered to still be experimental.
p {
white-space: nowrap;
overflow: hidden;
/* "overflow" value must be different from "visible" */
text-overflow: ellipsis;
width: 170px;
border: 1px solid #999;
direction: rtl;
text-align: left;
}
<p>first > second > third<br /> second > third > fourth > fifth > sixth<br /> fifth > sixth > seventh > eighth > ninth</p>
I finally had to crack and do something in JavaScript. I was hoping that someone would come up with a hail-mary CSS solution but people seem to just be up-voting the answer that should be correct if it weren't for the Chrome bugs. j08691 can have the bounty for his work.
<html>
<head>
<style>
#container {
width: 200px;
border: 1px solid blue;
}
#container div {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
</style>
<script>
function trimRows() {
var rows = document.getElementById('container').childNodes;
for (var i=0, row; row = rows[i]; i++) {
if (row.scrollWidth > row.offsetWidth) {
var textNode = row.firstChild;
var value = '...' + textNode.nodeValue;
do {
value = '...' + value.substr(4);
textNode.nodeValue = value;
} while (row.scrollWidth > row.offsetWidth);
}
}
}
</script>
</head>
<body onload='trimRows();'>
<div id="container" >
<div>first > second > third</div>
<div>second > third > fourth > fifth > sixth</div>
<div>fifth > sixth > seventh > eighth > ninth</div>
</div>
</body>
</html>
Fiddle
Why not just using direction:rtl;
It's a little buggy, but maybe a point in the right direction
http://jsfiddle.net/HerrSerker/ZfbaD/50/
$('.container')
.animate({'width': 450}, 4000)
.animate({'width': 100}, 4000)
.animate({'width': 170}, 4000)
.container {
white-space: nowrap;
overflow: hidden; /* "overflow" value must be different from "visible" */
text-overflow: ellipsis;
width:170px;
border:1px solid #999;
direction:rtl;
}
.container .part {
direction:ltr;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<span class="part">second</span>
<span class="part">></span>
<span class="part">third</span>
<span class="part">></span>
<span class="part">fourth</span>
<span class="part">></span>
<span class="part">fifth</span>
<span class="part">></span>
<span class="part">sixth</span>
</div>
These solutions solve the problem with misinterpreted preceding or trailing weak or neutral BiDi characters such as /, \, ~, ., etc. (basically any punctuation or special characters).
CSS Solution
Use a combination of:
direction: rtl & ltr
unicode-bidi: bidi-override
p {
direction: rtl;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* or pre (e.g. preserve multiple spaces) */
}
span {
direction: ltr;
unicode-bidi: bidi-override; /* or isolate, isolate-override, embed */
}
<p><span>/path/to/a/very/long/file.name</span></p>
<bdo> Solution
Another possibility uses the <bdo> Bidirectional Text Override element:
p {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* or pre (e.g. preserve multiple spaces) */
}
<bdo dir="rtl">
<p>
<bdo dir="ltr">/path/to/a/very/long/file.name</bdo>
</p>
</bdo>
Using #Hemlocks, #Brian Mortenson and #Jimbo's solutions, I've built a jQuery plugin to solve this problem.
I've also added support to return the initial value using .html() rather than having it return the current innerHTML. Hopefully it will be useful to someone...
(function($) {
$.trimLeft = function(element, options) {
var trim = this;
var $element = $(element), // reference to the jQuery version of DOM element
element = element; // reference to the actual DOM element
var initialText = element.innerHTML;
trim.init = function() {
overrideNodeMethod("html", function(){ return initialText; });
trimContents(element, element);
return trim;
};
trim.reset = function(){
element.innerHTML = initialText;
return trim;
};
//Overide .html() to return initialText.
var overrideNodeMethod = function(methodName, action) {
var originalVal = $.fn[methodName];
var thisNode = $element;
$.fn[methodName] = function() {
if (this[0]==thisNode[0]) {
return action.apply(this, arguments);
} else {
return originalVal.apply(this, arguments);
}
};
};
var trimContents = function(row, node){
while (row.scrollWidth > row.offsetWidth) {
var childNode = node.firstChild;
if (!childNode)
return true;
if (childNode.nodeType == document.TEXT_NODE){
trimText(row, node, childNode);
}
else {
var empty = trimContents(row, childNode);
if (empty){
node.removeChild(childNode);
}
}
};
};
var trimText = function(row, node, textNode){
var value = '\u2026' + textNode.nodeValue;
do {
value = '\u2026' + value.substr(4);
textNode.nodeValue = value;
if (value == '\u2026'){
node.removeChild(textNode);
return;
}
}
while (row.scrollWidth > row.offsetWidth);
};
trim.init();
};
$.fn.trimLeft = (function(options){
var othat = this;
var single = function(that){
if (undefined == $(that).data('trim')) {
var trim = new $.trimLeft(that, options);
$(that).data('trim', trim);
$(window).resize(function(){
$(that).each(function(){
trim.reset().init();
});
});
}
};
var multiple = function(){
$(othat).each(function() {
single(this);
});
};
if($(othat).length>1)
multiple(othat);
else
single(othat);
//-----------
return this;
});
})(jQuery);
Initiate using:
//Call on elements with overflow: hidden and white-space: nowrap
$('#container>div').trimLeft();
//Returns the original innerHTML
console.log($('#test').html());
fiddle
Using a slightly more complex markup (using the bdi-tag and an extra span for the ellipsis), we can solve the problem fully in CSS, no JS required at all -- cross browser (IE, FF, Chrome) and including keeping punctuation marks to the right:
http://jsbin.com/dodijuwebe/1/edit?html,css,output
Granted, this is something of a hack, involving pseudo-element goodness. However, our team has been using this code in production and we haven't had any issues whatsoever.
The only caveats are: The height of the line needs to be fixed and the background color needs to be known explicitly (inherit won't work).
If you don't care the indexing of those texts, you could use this method (it reverses the text lines):
If you have in your texts other HTML elements besides <br> you need to make some arrangements to use this method.
HTML code:
<p>first > second > third<br/>
second > third > fourth <br>
fifth > sixth > seventh</p>
CSS code:
p{
overflow: hidden;
text-overflow: ellipsis;
unicode-bidi: bidi-override;
direction: rtl;
text-align: left;
white-space: nowrap;
width: 140px;
}
JavaScript code
[].forEach.call(document.getElementsByTagName("p"), function(item) {
var str = item.innerText;
//Change the operators
str = str.replace(/[<>]/g, function(char){ return ({"<" : ">", ">" : "<"})[char] });
//Get lines
var lines = str.split(/\n/);
//Reverse the lines
lines = lines.map(function(l){ return l.split("").reverse().join("") });
//Join the lines
str = lines.join("<br>");
item.innerHTML = str;
});
jsfiddle
Based on your edit:
At this point I'm looking for a work around for the bugs in Chrome
that prevent it from rendering properly when a document is mixed RTL
and LTR. That was all I really needed from the outset, I just didn't
realize it.
Have you looked into the unicode-bidi css property (see Sitepoint or W3C)? I actually just learned about this myself on another recent post. My guess is you would want to use the embed value for those pieces going the opposite direction to the main site. So in j08691's answer where it is direction: rtl add unicode-bidi: embed to the CSS. This should solve "mixed RTL and LTR" issues you are having.
I put some JavaScript together to regex out three items and add the ellipsis in where necessary. This does not explicitly look at how much text will fit in the box but if the box is fixed this may not be an issue.
<style>
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width:170px;
border:1px solid #999;
direction:rtl;
text-align:left;
}
</style>
<p>first > second > third<br />
second > third > fourth > fifth > sixth<br />
fifth < sixth < seventh < eighth < ninth</p>
<script>
var text = $( 'p' ).text(),
split = text.split( '\n' ),
finalStr = '';
for( i in split ){
finalStr = finalStr.length > 0 ? finalStr + '<br />' : finalStr;
var match = /(\w+\s?(<|>)?\s?){3}$/.exec( split[i] );
finalStr = finalStr + ( split[i].length > match[0].length ? '...' : '' ) + match[0];
}
$( 'p' ).empty().html( finalStr );
</script>