0

Would anyone have an example to not allow users to add a string without spaces in between?

I'm using user's inputs to display information in a card, but if I write an input like "fsdfafsaffafsafsffgfdahf..." it ruins the UI display. I want to only allow users to input sentences with spaces in between. Is there any pattern I can use?

I'm using spans to display the input value in my card. Would this be a problem too?

See example below:

enter image description here

Carlos Escobar
  • 422
  • 3
  • 15
  • This is a wrong thing to do. Even if you require spaces, there can always be one word in a sentence that's longer than the allocated space. And what happens when you're on a smaller device? Instead, you should think about how to deal with long non-wrapping text. One common approach is to truncate the text and add ... at the end - but the actual solution is up to you. – Aleks G Nov 30 '20 at 13:22
  • That should be solved by css, there is usually an "show ellipsis" thing to replace text that overflows by `...` on input fields. The problem to solve is just that that in my opinion. – Pac0 Nov 30 '20 at 13:22
  • Or an even better approach: https://stackoverflow.com/a/3247434/717214 - use `word-wrap: break-word;` – Aleks G Nov 30 '20 at 13:24
  • Does this answer your question? [How do I wrap text with no whitespace inside a ?](https://stackoverflow.com/questions/3247358/how-do-i-wrap-text-with-no-whitespace-inside-a-td) – Aleks G Nov 30 '20 at 13:25
  • thank you all! yes, I was approaching the problem incorrectly. I just modified my css class and it worked. I limit the maxlength too – Carlos Escobar Nov 30 '20 at 13:36

1 Answers1

2

This is not the correct way to go, because you can't really know what count as a word and what does not. For example, Would you count Donaudampfschiffahrtsgesellschaftskapitän as a word ?

The preferred way to acheive this would be to have a defined width for your container and add the word-wrap: break-word property on it.

.my-container {
  width: 100px;
  word-wrap: break-word;
  background-color: rgba(255, 0, 0, 0.5)
}
<div class="my-container">
this is a small portion of a big text
Donaudampfschiffahrtsgesellschaftskapitän
</div>
Nicolas
  • 8,077
  • 4
  • 21
  • 51