nzambello / ellipsed Goto Github PK

When using this library, I found an issue. When the text doesn't have any space, e.g.

• The text is in Japanese (there's rarely space break in Japanese text).
• The content is a long word, longer than the width of the element.

The library couldn't handle such cases. The result is such text remains intact.

If you add more than one call to ellipsis() with responsive option (on different elements), it will fail: event listeners won't work because it's not unique.
Adding only one call with responsive handling it'll work, but it's needed to work with N calls.

I found that if you click on "responsive" checkbox before you have clicked on a button, it breaks: only dots are shown.

My Problem was i used a grid and all tiles should get the same height, the problem here is very simple all tiles have the same height.

First container nothing is rendered yet, 20px height (lineheight) with 2 lines max it will become 40px in height, after this is done the second container is affected by flexbox and automatically grown up and has a starting height of 40px.

40px = 2 lines since the lineHeight is 20px, but the calculation base is the 40px, so after the height is bigger then 40px rowsWrapper will increase to 2 which means now i have printed 2 lines. Which is basicly wrong since i allready have 2 lines.

What helps for me now was simply add the text into a wrapper so it would not be affected by flexbox, but i think the calculation should use the lineHeight and not the full height of the container.

Or simply render the text into a wrapper so it is not affected from outside in height.

    ...
    public ngAfterViewInit() {
        const wrapper = this.renderer.createElement("div");
        const oldHtml = this.el.nativeElement.innerHTML;
        wrapper.innerHTML = oldHtml;

        this.el.nativeElement.innerHTML = "";
        this.renderer.appendChild(this.el.nativeElement, wrapper);

        ellipsis(wrapper, 2, {
          responsive: true
        });
    }
    ...

Hello

Just discovered your lib for ellipse text and it is such a well designed solution. Great work, it helped me very much.

I was curious if you considered returning a value that was a final result that you set inside the element that you are targeting.
This can be useful if you want to take that truncated text and use it elsewhere.

Additionally, i know that this lib is for the truncation of a text in an element, but it could be useful to add a method or extend the existing ellipsis function with a option to prevent modification of the targeted element in case you want to use only the result of the truncation (this goes in conjunction with the above mentioned returning of truncated value).

EDIT:
To add to the last part, motivation for preventing the element modification was that i was trying out your lib in a React app and you should not modify elements inside DOM, rather as a value that you want to insert via VDOM.

I believe this lib is mature enough and it deserves it's own logo. How about it? Any ideas?

As reported on Reddit, it can be useful if it would support formatted content in HTML (bold, italic, ...).

https://www.reddit.com/r/Frontend/comments/7jrvnk/ellipsed_javascript_library_for_multiline_text/dr9smik/

Ampersand in content targeted is getting converted to &. Is there an option I am missing that would avoid this? Thanks

Hey,

I'm trying to import the lib the ES6 way:
import { ellipsis } from 'ellipsed';

However, I'm getting the following error.

Could not find a declaration file for module 'ellipsed'. 'project_path/node_modules/ellipsed/lib/ellipsed.js' implicitly has an 'any' type.
Try npm install @types/ellipsed if it exists or add a new declaration (.d.ts) file containing declare module 'ellipsed'; [7016]

Any idea why is this happening?
Thanks!

As @JohnAkerman made in PR #16, we should add an example of replaceStr usage in the demo

The responsive checkbox in the demo is correctly read when you first click uno of the five ellipsis buttons. After you use an ellipsis with the responsive option active, though, you can't switch it off. Well, the checkbox does switch off, but the window resize event handler is already there and won't go away.

I haven't found a quick way to remove it from the demo, I am submitting a PR in the next few minutes with a workaround in order to make it work, which is reloading the page when you switch off the checkbox.

In order to remove a listener from the window object, you need to have a reference to the function that was called, and only the lib code has it, so my guess is that we have to export another function from the lib, that resets the responsive option by removing the listener.

Sometimes I have html elements in handled content.

I'm attempting to truncate a paragraph with the class "carousel-item-description" to 3 lines, and add some options, but I continuously get the following error:

Uncaught ReferenceError: ellipsis is not defined

ellipsis('.carousel-item-description', 3, {replaceStr: '...', responsive: true, debounceDelay: 100});
How is the above call incorrect?

I have noticed sometimes that when my preact component loads to the page, instead of truncating by number of lines it truncates by words. I put the ellipsis call inside componentDidMount() initially, but have tried several other places as well. I only see the issue when loading my component via other components, not when running the demo of my component.

One of the latest PRs introduced a possible return value for the ellipsis function. It also introduced a function used to disable responsiveness for a previous ellipsis call.

I think these new feature should be added to the README. It's not useful to everybody, you normally don't want to remove the responsive option, but since it's there, some documentation on it would be good.

The demo page is throwing an error when interacting with the plugin in Internet Explorer 11.

'Symbol' is undefined @ Line 104 ellipsed.js

Tested on:
Internet Explorer 11.608
Windows 10

I think it would be beneficial to produce a list of supported browsers. We could even look into using SauceLabs to perform automated tests on any pushes with an indicator on the status per browser.

I like it when the code looks the same across the whole library, even if this is a tiny one. How about adding prettier as a default pre-commit hook?

This is easily achievable as described in the prettier docs.

As reported by @JohnAkerman in PR #8:
Something that would be useful to add is a section on Versioning; whether we are using SemVar etc. and a list of prerequisites if there are any (npm/yarn versions, ...).

I think we should add an option which will be a boolean that defaults to false, that when true will take the pre-formatted longer text and add it as a title attribute on the wrapping tag. This will allow the user to hover over the element to get the pre-trucated version in a tooltip.

This would also introduce the idea of options or settings that the user can customise, perhaps the ability to change the "..." to something else instead, perhaps just a single "."?

Example screenshot