验证模式不允许用户添加没有空格分隔符的字符串答案

【问题标题】：Validation pattern to not allow users to add strings without space separators验证模式不允许用户添加没有空格分隔符的字符串
【发布时间】：2020-11-30 13:19:27
【问题描述】：

有没有人可以举例说明不允许用户添加中间没有空格的字符串？

我正在使用用户的输入来显示卡片中的信息，但如果我写了一个像“fsdfafsaffafsafsffgfdahf...”这样的输入，它会破坏 UI 显示。我只想让用户输入带有空格的句子。有什么我可以使用的模式吗？

我正在使用跨度来显示卡中的输入值。这也会有问题吗？

请看下面的例子：

【问题讨论】：

这是错误的做法。即使您需要空格，句子中总有一个词比分配的空间长。当您使用较小的设备时会发生什么？相反，您应该考虑如何处理长的非换行文本。一种常见的方法是截断文本并在末尾添加 ... - 但实际解决方案取决于您。
这应该由css解决，通常有一个“显示省略号”的东西来替换输入字段上...溢出的文本。在我看来，要解决的问题就是这样。
或者更好的方法：stackoverflow.com/a/3247434/717214 - 使用word-wrap: break-word;
这能回答你的问题吗？ How do I wrap text with no whitespace inside a <td>?
谢谢大家！是的，我错误地解决了这个问题。我刚刚修改了我的 css 类并且它有效。我也限制了最大长度

标签： javascript html reactjs

【解决方案1】：

这不是正确的方法，因为您无法真正知道什么算作一个词，什么不算。例如，你会把 Donaudampfschiffahrtsgesellschaftskapitän 算作一个词吗？

实现这一点的首选方法是为您的容器定义一个width，并在其上添加word-wrap: break-word 属性。

.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>

【讨论】：

谢谢你解决了这个问题:)！