问一个前端问题

275 天前
 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>
1612 次点击
所在节点    前端开发
15 条回复
zoeliu
275 天前
什么叫元素的自动换行? 我想你可能需要的是 css 的 white-space
faust427
275 天前
对, 就是这个, 宽度不够一行文字不就会换行么, 现在就是需要用这个换行去分割原本的内容
@zoeliu
USDT
275 天前
这个得要 js 来做 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getClientRects
你看下这个页面,最底下那个 sample ,画了一堆框的,是不是满足你的需求?
jifengg
275 天前
楼主想要的
是获取文字
呈现出来的
最终效果每
一行的文本
吧?

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

抱歉我暂时没经验,不过,这涉及到浏览器对 dom 的渲染了,字体、字号、css 盒、文字内容等等都会有影响,可以往 dom 渲染这方面查查。
dfkjgklfdjg
275 天前
@faust427 #2 ,还是不是很懂。我猜测你可能是需要这个换行标签。👉 [<wbr>]( https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/wbr)
jamosLi
275 天前
你这里面有很多 class 啊 ,先把 class 补齐,在看效果
SpiritQAQ
275 天前
和 gpt 配合了下写了个简陋的 demo ,用了 js ,lz 可以看下有没有帮助
https://jsbin.com/netoxukeqa/edit?html
SpiritQAQ
275 天前


接上楼,如果没理解错的话,lz 要的功能应该是这样的吧
old9
275 天前
一个思路,可以利用一下 textarea 的 wrap="hard 这个上古特性:
https://stackoverflow.com/questions/2140573/html-textarea-use-javascript-to-get-wrapped-text
old9
275 天前
HAYWAEL
274 天前
我没看懂 你想要什么样的效果。或者说 你 现在遇到什么问题
faust427
274 天前
对, 就是这个, 宽度不够一行文字不就会换行么, 现在就是需要用这个换行去分割原本的内容
@SpiritQAQ 对的就是这个, 只是你给的网站一直转不出来东西...
SpiritQAQ
274 天前
heishu
274 天前
或许你需要的是 <pre></pre> 标签 ?
chnwillliu
271 天前
就是要获取 CSS 一个 block level container 中的每个 line box 包含的文字分别是什么。

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

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

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

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

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

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

© 2021 V2EX