这是一个创建于 261 天前的主题，其中的信息可能已经有所发展或是发生改变。
一段富文本显示在定宽盒子内, 怎么按照元素的自动换行来切割呢,就比如下面这段代码
<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 261 天前 via Android
什么叫元素的自动换行？ 我想你可能需要的是 css 的 white-space
|
 |
3
USDT 261 天前
这个得要 js 来做 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getClientRects
你看下这个页面，最底下那个 sample ，画了一堆框的，是不是满足你的需求？ |
 |
4
jifengg 261 天前
楼主想要的
是获取文字 呈现出来的 最终效果每 一行的文本 吧？ 比如假设我上面的回复是一行但是因为 div 宽度限制而呈现出来多行了。你想获取类似： ["楼主想要的", "是获取文字", "呈现出来的", "最终效果每", "一行的文本", "吧？"] 的文本列表？ 抱歉我暂时没经验，不过，这涉及到浏览器对 dom 的渲染了，字体、字号、css 盒、文字内容等等都会有影响，可以往 dom 渲染这方面查查。 |
 |
5
dfkjgklfdjg 261 天前
@faust427 #2 ，还是不是很懂。我猜测你可能是需要这个换行标签。👉 [<wbr>]( https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/wbr)
|
 |
6
jamosLi 261 天前
你这里面有很多 class 啊 ，先把 class 补齐，在看效果
|
 |
7
SpiritQAQ 261 天前
和 gpt 配合了下写了个简陋的 demo ，用了 js ，lz 可以看下有没有帮助
https://jsbin.com/netoxukeqa/edit?html |
|
8
SpiritQAQ 261 天前
 接上楼，如果没理解错的话，lz 要的功能应该是这样的吧 |
 |
9
old9 261 天前  1
一个思路，可以利用一下 textarea 的 wrap="hard 这个上古特性：
https://stackoverflow.com/questions/2140573/html-textarea-use-javascript-to-get-wrapped-text |
|
10
old9 261 天前
|
 |
11
HAYWAEL 261 天前
我没看懂 你想要什么样的效果。或者说 你 现在遇到什么问题
|
 |
12
faust427 OP 对, 就是这个, 宽度不够一行文字不就会换行么, 现在就是需要用这个换行去分割原本的内容
@SpiritQAQ 对的就是这个, 只是你给的网站一直转不出来东西... |
|
13
SpiritQAQ 261 天前
|
 |
14
heishu 260 天前
或许你需要的是 <pre></pre> 标签 ?
|
 |
15
chnwillliu 257 天前 via Android
就是要获取 CSS 一个 block level container 中的每个 line box 包含的文字分别是什么。
可惜 CSS 并没有暴露 line box 的任何 API ，一个 p 标签最终会 render 出几个 line box 都不知道，更不用说直接获取文字是在哪个地方断开到下一行的。 SpiritQAQ 的方法非常巧妙，利用了 Range API ，一个个字符吃进去然后检测 range 的形状和坐标，一般情况应付没问题了。频繁用 Range 做 detection 不知道会不会有性能瓶颈。 |
Select Language