Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RE: Large concurrent text cutoff for more than one line #53 #65

Open
RaphaelBaskerville opened this issue Jul 12, 2018 · 6 comments
Open

Comments

@RaphaelBaskerville
Copy link

I am having the same issue as described in:

Issue #53

I noticed that your last comment said that it was fixed and to use 0.13.0. but I have tested with it and It seems like long words are still being cut-off in narrow containers.

Is there any plan to fix this @ShinyChang?
Or perhaps I am not using it correctly...

screen shot 2018-07-12 at 3 48 04 pm

@ShinyChang
Copy link
Owner

Hi @RaphaelBaskerville ,
The word should not be truncate. Thinking in real world, generally you will not have so much chars in one word. So you will not have this problem. So, this issue will not be fixed.

@ivanouski
Copy link

ivanouski commented Jul 16, 2018

Have the same issue. There is Germany in the real world... (

@ShinyChang
Copy link
Owner

Hi @ivanouski and @RaphaelBaskerville , may I have a screenshot and what result are you expected? Does the word be cut off is acceptable?

For example the word internationalization be cut into international..

If can, then I will plan this feature.

@ShinyChang ShinyChang added the bug label Aug 17, 2018
@kirjai
Copy link

kirjai commented Nov 7, 2019

could perhaps this be implemented as a configurable option? something like

<TextTruncate line={1} splitByCharacter text="somethingveryveryveryveryveryveryveryverylong"  />

the result of the code above would be to try and fit as many characters as is possible if splitByCharacter prop is provided.

This way the behaviour is retained for those that want it split by word, but also supports those that want it split by characters?

Our use case is that we are trying to show some strings that developers use to name entities. and those are end-user-defined, so they could do anything from "my very descriptive name for an entity" to "my_very_descriptive_name_for_an_entity" and in the second case - we're not able to show anything at all, which is sad

@kirjai
Copy link

kirjai commented Nov 7, 2019

For those that stumble upon this later.

If you're trying to truncate a single long line of text with no spaces, an alternative is to just use CSS:

// css
.truncate {
  white-space: nowrap;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

// html / jsx
<span className="truncate">myveryveryveryveryveryveryveryveryveryverylongstring</span>

make sure your width is set to whatever makes sense in your context

@guatedude2
Copy link

I'm having the same issue. We have titles that sometimes use underscores instead of spaces. We can't do much about the titles since our customers enter those themselves. It would be nice to be able to support word-wrap: break-word for long words

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants