如何拆分自动换行的文字?

2018-06-23 11:02:07 +08:00
 qsnow6

如上图,在一个宽度固定的容器内,超过宽度的文字会自动换行。现在需要以自然行的方式,提取前20行有什么解决方案?

自然行即肉眼、常识上的行。如:大家都说:章晓峰是个很可恶很抠门的人。,在这个容器内就是 2 行

目前我的解决方案

  1. 以换行符\n 来拆分,缺点:遇到文字多的段落,自然行数不可控;
  2. 人工去敲回车。。。这个很蠢
2008 次点击
所在节点    程序员
6 条回复
Kasine
2018-06-23 11:23:12 +08:00
Word 里面用 Alt+左键框选应该可以
qsnow6
2018-06-23 11:51:10 +08:00
@Kasine 是想用代码层面去拆分的;
发现 php wordwrap 函数 可以
TtiGeR
2018-06-23 13:56:05 +08:00
是要做预览么?

其实稍微多截一点 然后限高(根据行高算)或者用 line-clamp

如果纯中文(等宽字符)还好,遇到混合英文的,因为字体和浏览器原因,换行还不是完全一致的。
qsnow6
2018-06-23 15:52:49 +08:00
@TtiGeR 是要把一篇文章,以行为单位,等份拆成 X 份;

长度不一致是由于中英文所占字节长度不一样导致的,英文占 1 个字节、中文 GBK 编码 2 个字节、UTF8 占 3 个字节;

暂时是把中文转换成 GBK 编码,每增加一个字符就比对下字节长度,确保字节长度<=最大字节长度就可以了
msg7086
2018-06-23 16:45:32 +08:00
首先吧,你这个宽度计算完全依赖于字体渲染。比如非汉字与汉字的比例不定,标点符号宽度的调整,标点在行首行尾的额外调整规则等等,有很多因素。
如果你要得到证实的结果,那就真的只能拿同一个渲染器进行渲染。比如浏览器里跑的话,直接开个容器往里填字然后测算大小。如果是应用程序里跑的话,找个能排版的组件来渲染。

中文 2 宽,英文 1 宽,这种只有在等宽环境(比如命令行下)才能用。先测出整个字符串的 Unicode Width,然后除以宽度算行数。
superbiger
2018-06-24 00:14:53 +08:00
https://www.zhangxinxu.com/wordpress/2018/02/canvas-text-break-line-letter-spacing-vertical/
你看下这个吧,可能 canvas 绘制可能能实现你想要的控制精度。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/465217

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX