一段富文本显示在定宽盒子内, 怎么按照元素的自动换行来切割呢,就比如下面这段代码
<div class="box" id="box">
<!-- box 里面是一段富文本 -->
<p>阅读下面文章,回答各问题。</p>
<p class="tkspec-align-center">紫藤萝瀑布(节选)</p>
<p> ①我不由得停住了脚步。</p>
<p>
②从未见过开得这样盛的藤萝,只见一片辉煌的淡紫色,像一条瀑布,从空中垂下,不见其发端,也不见其终极。只是深深浅浅的紫,仿佛在流动,在欢笑,在不停地生长。紫色的大条幅上,泛着点点银光,就像迸溅的水花。仔细看时,才知道那是每一朵紫花中的最浅淡的部分,在和阳光互相挑逗。
</p>
<p> ③这里春红已谢,没有赏花的人群,也没有蜂围蝶阵。有的就是这一树闪光的、盛开的藤萝。<span
class="tkspec-underline-normal">花朵儿一串挨着一串,一朵接着一朵,彼此推着挤着,好不活泼热闹!</span></p>
<p> ④“我在开花!”它们在笑。</p>
<p> ⑤“我在开花!”它们嚷嚷。</p>
<p>
⑥每一穗花都是上面的盛开、下面的待放。颜色便上浅下深,好像那紫色沉淀下来了,沉淀在最嫩最小的花苞里。每一朵盛开的花就像是一个小小的张满了的帆,帆下带着尖底的舱。船舱鼓鼓的;又像一个忍俊不禁的笑容,就要绽开似的。那里装的是什么仙露琼浆?我凑上去,想摘一朵。
</p>
<p>
⑦但是我没有摘。我没有摘花的习惯。我只是伫立凝望,觉得这一条紫藤萝瀑布不只在我眼前,也在我心上缓缓流过。流着流着,它带走了这些时一直压在我心上的关于生死的疑惑,关于疾病的痛楚。我浸在这繁密的花朵的光辉中,别的一切暂时都不存在,有的只是精神的宁静和生的喜悦。……
</p>
<p> ⑧过了这么多年,藤萝又开花了,而且开得这样盛,这样密,紫色的瀑布遮住了粗壮的盘虬卧龙般的枝干,不断地流着,流着,流向人的心底。</p>
<p>
⑨花和人都会遇到各种各样的不幸,但是生命的长河是无止境的。我抚摸了一下那小小的紫色的花舱,那里满装生命的酒酿,它张满了帆,在这闪光的花的河流上航行。它是万花中的一朵,也正是一朵一朵花,组成了万花灿烂的流动的瀑布。</p>
<p> ⑩在这浅紫色的光辉和浅紫色的芳香中,我不觉加快了脚步。</p>
<p>( 1 )第③段画线的句子写出藤萝花的什么特点?</p>
<p>( 2 )第⑦段“我只是伫立凝望”中的“凝望”可否换成“观望”?为什么?</p>
<p>( 3 )第⑨段“花和人都会遇到各种各样的不幸,但是生命的长河是无止境的”一句在文中的含义是什么?</p>
<p>( 4 )开头说“我不由得停住了脚步”,结尾说“我不觉加快了脚步”,在文章结构上有什么作用?有什么寓意?</p>
</div>
1
zoeliu 2023-08-11 10:28:31 +08:00 via Android
什么叫元素的自动换行? 我想你可能需要的是 css 的 white-space
|
3
USDT 2023-08-11 10:52:51 +08:00
这个得要 js 来做 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getClientRects
你看下这个页面,最底下那个 sample ,画了一堆框的,是不是满足你的需求? |
4
jifengg 2023-08-11 11:15:38 +08:00
楼主想要的
是获取文字 呈现出来的 最终效果每 一行的文本 吧? 比如假设我上面的回复是一行但是因为 div 宽度限制而呈现出来多行了。你想获取类似: ["楼主想要的", "是获取文字", "呈现出来的", "最终效果每", "一行的文本", "吧?"] 的文本列表? 抱歉我暂时没经验,不过,这涉及到浏览器对 dom 的渲染了,字体、字号、css 盒、文字内容等等都会有影响,可以往 dom 渲染这方面查查。 |
5
dfkjgklfdjg 2023-08-11 11:25:30 +08:00
@faust427 #2 ,还是不是很懂。我猜测你可能是需要这个换行标签。👉 [<wbr>]( https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/wbr)
|
6
jamosLi 2023-08-11 11:26:56 +08:00
你这里面有很多 class 啊 ,先把 class 补齐,在看效果
|
7
SpiritQAQ 2023-08-11 11:33:10 +08:00
和 gpt 配合了下写了个简陋的 demo ,用了 js ,lz 可以看下有没有帮助
https://jsbin.com/netoxukeqa/edit?html |
8
SpiritQAQ 2023-08-11 11:37:51 +08:00
|
9
old9 2023-08-11 11:44:52 +08:00 1
一个思路,可以利用一下 textarea 的 wrap="hard 这个上古特性:
https://stackoverflow.com/questions/2140573/html-textarea-use-javascript-to-get-wrapped-text |
10
old9 2023-08-11 11:50:54 +08:00
|
11
HAYWAEL 2023-08-11 12:23:15 +08:00
我没看懂 你想要什么样的效果。或者说 你 现在遇到什么问题
|
12
faust427 OP 对, 就是这个, 宽度不够一行文字不就会换行么, 现在就是需要用这个换行去分割原本的内容
@SpiritQAQ 对的就是这个, 只是你给的网站一直转不出来东西... |
13
SpiritQAQ 2023-08-11 14:32:56 +08:00
|
14
heishu 2023-08-11 17:06:52 +08:00
或许你需要的是 <pre></pre> 标签 ?
|
15
chnwillliu 2023-08-15 11:02:00 +08:00 via Android
就是要获取 CSS 一个 block level container 中的每个 line box 包含的文字分别是什么。
可惜 CSS 并没有暴露 line box 的任何 API ,一个 p 标签最终会 render 出几个 line box 都不知道,更不用说直接获取文字是在哪个地方断开到下一行的。 SpiritQAQ 的方法非常巧妙,利用了 Range API ,一个个字符吃进去然后检测 range 的形状和坐标,一般情况应付没问题了。频繁用 Range 做 detection 不知道会不会有性能瓶颈。 |