问一个前端问题

[faust427]

一段富文本显示在定宽盒子内, 怎么按照元素的自动换行来切割呢,就比如下面这段代码

<div class="box" id="box">
	<!-- box 里面是一段富文本 -->
	<p>阅读下面文章，回答各问题。</p>
	<p class="tkspec-align-center">紫藤萝瀑布（节选）</p>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ①我不由得停住了脚步。</p>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  	②从未见过开得这样盛的藤萝，只见一片辉煌的淡紫色，像一条瀑布，从空中垂下，不见其发端，也不见其终极。只是深深浅浅的紫，仿佛在流动，在欢笑，在不停地生长。紫色的大条幅上，泛着点点银光，就像迸溅的水花。仔细看时，才知道那是每一朵紫花中的最浅淡的部分，在和阳光互相挑逗。
	</p>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;③这里春红已谢，没有赏花的人群，也没有蜂围蝶阵。有的就是这一树闪光的、盛开的藤萝。<span
    class="tkspec-underline-normal">花朵儿一串挨着一串，一朵接着一朵，彼此推着挤着，好不活泼热闹！</span></p>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ④“我在开花!”它们在笑。</p>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ⑤“我在开花!”它们嚷嚷。</p>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  	⑥每一穗花都是上面的盛开、下面的待放。颜色便上浅下深，好像那紫色沉淀下来了，沉淀在最嫩最小的花苞里。每一朵盛开的花就像是一个小小的张满了的帆，帆下带着尖底的舱。船舱鼓鼓的；又像一个忍俊不禁的笑容，就要绽开似的。那里装的是什么仙露琼浆？我凑上去，想摘一朵。
	</p>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  	⑦但是我没有摘。我没有摘花的习惯。我只是伫立凝望，觉得这一条紫藤萝瀑布不只在我眼前，也在我心上缓缓流过。流着流着，它带走了这些时一直压在我心上的关于生死的疑惑，关于疾病的痛楚。我浸在这繁密的花朵的光辉中，别的一切暂时都不存在，有的只是精神的宁静和生的喜悦。……
</p>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ⑧过了这么多年，藤萝又开花了，而且开得这样盛，这样密，紫色的瀑布遮住了粗壮的盘虬卧龙般的枝干，不断地流着，流着，流向人的心底。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  	⑨花和人都会遇到各种各样的不幸，但是生命的长河是无止境的。我抚摸了一下那小小的紫色的花舱，那里满装生命的酒酿，它张满了帆，在这闪光的花的河流上航行。它是万花中的一朵，也正是一朵一朵花，组成了万花灿烂的流动的瀑布。</p>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ⑩在这浅紫色的光辉和浅紫色的芳香中，我不觉加快了脚步。</p>
	<p>（ 1 ）第③段画线的句子写出藤萝花的什么特点？</p>
	<p>（ 2 ）第⑦段“我只是伫立凝望”中的“凝望”可否换成“观望”？为什么？</p>
	<p>（ 3 ）第⑨段“花和人都会遇到各种各样的不幸，但是生命的长河是无止境的”一句在文中的含义是什么？</p>
	<p>（ 4 ）开头说“我不由得停住了脚步”，结尾说“我不觉加快了脚步”，在文章结构上有什么作用？有什么寓意？</p>
</div>

[zoeliu]

什么叫元素的自动换行？ 我想你可能需要的是 css 的 white-space

[faust427]

对, 就是这个, 宽度不够一行文字不就会换行么, 现在就是需要用这个换行去分割原本的内容
@zoeliu

[USDT]

这个得要 js 来做 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getClientRects
你看下这个页面，最底下那个 sample ，画了一堆框的，是不是满足你的需求？

[jifengg]

楼主想要的
是获取文字
呈现出来的
最终效果每
一行的文本
吧？

比如假设我上面的回复是一行但是因为 div 宽度限制而呈现出来多行了。你想获取类似：
["楼主想要的",
"是获取文字",
"呈现出来的",
"最终效果每",
"一行的文本",
"吧？"]
的文本列表？

抱歉我暂时没经验，不过，这涉及到浏览器对 dom 的渲染了，字体、字号、css 盒、文字内容等等都会有影响，可以往 dom 渲染这方面查查。

[dfkjgklfdjg]

@faust427 #2 ，还是不是很懂。我猜测你可能是需要这个换行标签。👉 [<wbr>]( https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/wbr)

[jamosLi]

你这里面有很多 class 啊 ，先把 class 补齐，在看效果

[SpiritQAQ]

和 gpt 配合了下写了个简陋的 demo ，用了 js ，lz 可以看下有没有帮助
https://jsbin.com/netoxukeqa/edit?html

[SpiritQAQ]

接上楼，如果没理解错的话，lz 要的功能应该是这样的吧

[old9]

一个思路，可以利用一下 textarea 的 wrap="hard 这个上古特性：
https://stackoverflow.com/questions/2140573/html-textarea-use-javascript-to-get-wrapped-text

[old9]

codepen:
https://codepen.io/old9/pen/xxQoEpG

[HAYWAEL]

我没看懂 你想要什么样的效果。或者说 你 现在遇到什么问题

[faust427]

对, 就是这个, 宽度不够一行文字不就会换行么, 现在就是需要用这个换行去分割原本的内容
@SpiritQAQ 对的就是这个, 只是你给的网站一直转不出来东西...

[SpiritQAQ]

@faust427
换 codepen 了
https://codepen.io/zegel/pen/gOQNLNN

[heishu]

或许你需要的是 <pre></pre> 标签 ?

[chnwillliu]

就是要获取 CSS 一个 block level container 中的每个 line box 包含的文字分别是什么。

可惜 CSS 并没有暴露 line box 的任何 API ，一个 p 标签最终会 render 出几个 line box 都不知道，更不用说直接获取文字是在哪个地方断开到下一行的。

SpiritQAQ 的方法非常巧妙，利用了 Range API ，一个个字符吃进去然后检测 range 的形状和坐标，一般情况应付没问题了。频繁用 Range 做 detection 不知道会不会有性能瓶颈。