javascript - chop div 内的文本

标签 javascript html css

<分区>

我有一些动态文本(来自数据库)，我需要放入 div

我的 div 有固定大小。但是，当文本变得太长时，它会分成两行。我想在较长文本的末尾放置三个点，使它们适合一行。

例如:My really long text 变成了 My really lo...

我做了几次尝试，但基本上都是靠算字符。也就是说，不管怎样，都不是很幸运，因为字符没有固定的宽度。例如，大写的 W 比小写的 i

宽得多

因此，我遇到字符计数方法的两个主要问题:

如果文本有很多窄字符，它会被剪切并附加 ...，即使文本在 trim 前实际上适合一行。
当文本包含许多宽字符时，即使我将其剪切到最大字符数并附加点，它也会以两行结束。

这里有没有考虑文本实际宽度而不是字符数的解决方案(JavaScript 或 CSS)？

最佳答案

使用这些样式:

white-space: nowrap;      /*keep text on one line */
overflow: hidden;         /*prevent text from being shown outside the border */
text-overflow: ellipsis;  /*cut off text with an ellipsis*/

关于javascript - chop div 内的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15405817/

上一篇：Javascript wait() 函数

下一篇：html - 创建全屏 iframe

相关文章：

javascript - 与 UIWebview 表单弹出窗口通信？

javascript - 使用 React JS 无限滚动

html - 居中菜单链接

jquery - 无法使用 jquery 滑动 div 内容

javascript - 使用 id 和 Javascript 从数组中删除项目

javascript - 如何从外部加载 json 到 D3 应用程序

javascript - 如何确保定义 img.onload 函数的脚本在 img 之前加载？

html - 如何使表格单元格中溢出的 div 的 css 变得重要？

php - 如何将具有动态大小的图像蒙版到形状？

html - 如何对齐两个按钮