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'
/>
Related
I have the following mark-up:
if ($('.replacetext').text().length > 20) {
var linkText = $('.replacetext').text();
$('.replacetext').html(linkText.substring(0, 20) + "...")
$('.replacetext').on("click", function(e) {
console.log("linkText :: ", linkText);
$('.replacetext').html(linkText);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h5>
<a class="replacetext" href="">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>
<h5>
<a class="replacetext" href="">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>
How can I make it so that if the h5 text (h5 may be more then one) is above a certain number of characters, I get rid of the other characters and replace them with a "..."?
the problem with this code is it also replaces the text same at all h5 tags along with dots.
First up I would reconsider the use of the a tag. You don't have a link. Use something else. I'll leave that up to you.
Next, you want to store the original text. I will use data attributes for this.
Finally, you want to only update the text of the clicked element. We will use the this keyword to help out here.
//Go through each long title
$('.replacetext').each(function() {
//If long title
if ($(this).text().length > 20) {
//Store original string in data attribute
$(this).data("og", $(this).text());
//Replace text
$(this).html($(this).text().substring(0, 20) + "...")
}
});
$('.replacetext').on("click", function(e) {
//Stop the link going anywhere
e.preventDefault();
console.log("Original Text: " + $(this).data("og"));
//Replace with the original
$(this).text($(this).data("og"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h5>
<a class="replacetext" href="">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>
<h5>
<a class="replacetext" href="">I am another 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>
<h5>
<a class="replacetext" href="">I am short</a>
</h5>
See CSS text-overflow Property
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Add all these. To make in single line.
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width:100px; // some width
To do in multi line which actually you asked.
#content{
overflow: hidden;
width:100px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
Please note that this multiline code is supported only in web-kit browsers for now.
This is just a proof of concept and has many unhandled potential pitfalls, but you could recursively iterate the children of the element and truncate the text nodes.
I'm not saying this is a good idea. You'll run into whitespace complications and edge cases. Just saying it could be done this way in theory.
const TEXT = 3;
const ELEMENT = 1;
function truncateElement (elem, maxlength) {
let remaining = maxlength;
[...elem.childNodes].forEach(node => {
if (node.nodeType === TEXT) {
node.nodeValue = node.nodeValue.substr(0, remaining);
remaining -= node.nodeValue.length;
}
else if (node.nodeType === ELEMENT) {
truncateElement(node, remaining);
}
});
if (!remaining) {
elem.appendChild(document.createTextNode('…'));
}
}
document.querySelector('button')
.addEventListener(
'click',
() => truncateElement(document.querySelector('h5'), 20)
);
<div class="demo">
<h5><a class="replacetext" href="">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>
<button>Truncate to 20</button>
</div>
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'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.
I have the following structure on a div:
<div class="box1" id="infobox">
<h2> Point characteristics: </h2>
<div style="padding-left:30px" align="left">
<ul>
<li class="infobox_list"><b>X value: </b><span class="clsshorted infobox_text" id="infobox_xvalue"> </span></li>
<li class="infobox_list"><b>Y value: </b><span class="clsshorted infobox_text" id="infobox_yvalue"> </span></li>
<li class="infobox_list"><b>Description: </b><span class="clsshorted infobox_text" id="infobox_description"> </span></li>
</ul>
Where the class "infobox_list" contains the following CSS:
.infobox_list {
padding: 0px 0px 10px 0px;
width: 500px;
}
The class "clsshorted" contains the following CSS:
span.clsshorted {
vertical-align: bottom;
overflow: hidden;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
width: 300px;
}
And the class "infobox_text" contains the following CSS:
.infobox_text {
overflow: auto;
white-space: nowrap;
word-wrap:break-word;
}
Example can be seen at: https://jsfiddle.net/nowv94yz/
I have been encountering two problems which I don't know how to deal with them:
The first problem I have been encountering is that I toggle, by using the "toggleClass()" function from JQuery, the class "clsshorted". When the clsshorted class is active I would like that the "ellipsised" text from the "text-overflow" property is ellipted at the end of the <li> tag (which as it can be seen at the CSS is 500px width) instead than on the 300px that I input. The thing is that as the string is so long (and with no spaces) that if I do not input that 300px it does not ellipsisate the text or it does outside the box size... (check jsfiddle avobe to see the problem)
The second problem I have been encountering is that when the "clsshort" class is not active, and thus only the "infobox_text" class is active, I would like this large string without spaces to appear completely displayed, but respecting the borders of the <li> tag. This means that if the <li> tag is 500px width, and the string would need 1501px to be displayed, 4 justified rows appear containing the string cutted on those part where the word reaches the end of the content of the box (500px)
Any ideas on how to do this?
Thank you in advance!
For the second problem, you just need to remove white-space: nowrap; from .infobox_text.
This question already has answers here:
Ellipsis in the middle of a text (Mac style)
(16 answers)
Closed 7 years ago.
Hi I have list of title in a drop-down as string ex:
"Bharat Untitled offer #564", "Bharat Untitled offer #563"
respectively.
Its title is long so, We want title should show first eight character, then '...' and last 4 character.
I used css rules:
.title{
max-width: 100px;
min-width: 100px;
overflow: hidden;
text-overflow:ellipsis;
}
And get output like:
Bharat Unt...
I want out put like:
Bharat Untitled...ffer
Any ideas how to do this?
Try this:
var charAtBeginning = 10;
var charAtEnd = 7;
var myStr = "I have list of title in a drop-down as string example";
var finalOutput = "";
if (myStr.length > (charAtBeginning + charAtEnd)) {
finalOutput = myStr.substring(0, charAtBeginning) + '..' + myStr.substring((myStr.length - charAtEnd), myStr.length);
}
alert(finalOutput);
if you want to do it with javascript or jquery then there are certain possible ways to do this thing, i am going to illustrate on menthod here.
function processName(ret){
ret = ret.substr(0,8) + "..."+ret.substr(ret.length - 5);
return ret;
}
now All you need to do is to pass each and every value to this function, i assume you know how to do it. good luck.
https://jsfiddle.net/8ye6df9p/
I made this little thing.. i used a monospace font.. hopes it make you bit wiser..
span {
font-family: "Lucida Console", Monaco, monospace;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 6em;
font-size: 1em;
}
<span>dog eatsdodddddddddgsdfghjkghersdddgsdfghjkghersdddgsdfghjkghersdddgsdfghjkgherstyfghurefyghujrttgyhujrttgyhjretghrtgh</span>
<span>dogfgggyfg ff tgyhujrttgyhjretghrtgh</span>
<span>dog </span>
<span>brainatgs200 </span>