防止水平滚动模糊输入

Question

我正在使用输入并使用text-overflow: ellipsis截断文本，但是如果在未聚焦时在输入上水平滚动，则可以滚动省略号并查看空白/空白输入空间。有没有办法防止水平滚动发生？任何帮助将不胜感激！

这是输入代码：

＆＃13;

＆＃13;

<InputWrapper>
   <Form.Input
      label='Text - 30 Char Limit'
      maxLength='30'
      placeholder='this input accepts up to 30 characters'
   />
</InputWrapper>

＆＃13;

＆＃13;

＆＃13;

和样式化组件css：

＆＃13;

＆＃13;

const InputWrapper = styled.span`
.ui.input input {
  text-overflow: ellipsis !important;
  }
`;

＆＃13;

＆＃13;

＆＃13;