视觉截断文本而不会导致数据问题

Question

我已经用Google搜索并浏览了SO和Programmers.stackexchange并没有找到提及。

背景 我正在开发一个项目，用户和设计师希望我将我输出的文本截断为可更新的形式以获得视觉吸引力。他们不希望文本在输入字段的末尾被截断，并希望框中的文本符合框的长度。

问题： 我知道如何截断字符串，我知道如何让我的脚本忽略未更新的字段。我不知道该怎么做是为了在用户开始更新字段时保持数据完整性不被破坏。因为这些字段不再包含完整的值，所以当我更新数据库时，这似乎会带来严重的缺陷。

问题： 有没有什么方法可以根据截断的演示文稿给出他们想要的内容，然后在他们尝试编辑输入时导致每个输入的全文出现......或者我只需要回去说“你想要什么不能做？”我也对其他建议持开放态度。 ：）

Answer 1

我认为您可能正在寻找text-overflow CSS属性。

Answer 2

我会考虑保留包含截断字符串和fulls字符串的属性的行，并使用截断字符串进行显示。当他们点击表单字段时，您可以用完整的字符串替换它。如果没有更改，则输入的值将匹配完整的字符串属性。沿着那个原则，如果他们没有改变任何东西，再用截断的字符串替换它。

如果他们编辑过任何内容，您可以动态创建一个已编辑的属性，以便从输入字段存储已编辑的字符串版本。

基本上在这一点上它只是一些简单的属性测试/等式检查。

Answer 3

如果我理解正确，你在这里遇到一些挑战。您需要以截断的形式显示一些数据，这相对简单。您还需要在数据编辑时完整显示数据，并在提交表单时将完整数据替换为截断数据，但要避免消除用户所做的更改。

你可以用jQuery做到这一点。显示截断的数据，但使用.data()存储完整数据。还可以使用.data（）在每个字段上存储一个标志，以便您知道它是否已被编辑。当一个字段获得焦点时，在完整数据中显示。提交表单后，请检查每个字段的标记以查看其是否已被编辑。如果有，请不要管它。如果尚未编辑数据，请删除字段内容并交换全长数据。然后提交表格。

您将显示截断的数据，允许编辑完整的数据，并避免在未编辑的情况下提交截断的数据。