ShinyChang/React-Text-Truncate

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

RaphaelBaskerville opened this issue · 6 comments

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

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.

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

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.

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

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

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