V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
faust427
V2EX  ›  前端开发

问一个前端问题

  •  
  •   faust427 · 2023-08-11 10:18:25 +08:00 · 1850 次点击
    这是一个创建于 481 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    <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>
    
    15 条回复    2023-08-15 11:02:00 +08:00
    zoeliu
        1
    zoeliu  
       2023-08-11 10:28:31 +08:00 via Android
    什么叫元素的自动换行? 我想你可能需要的是 css 的 white-space
    faust427
        2
    faust427  
    OP
       2023-08-11 10:44:08 +08:00
    对, 就是这个, 宽度不够一行文字不就会换行么, 现在就是需要用这个换行去分割原本的内容
    @zoeliu
    USDT
        3
    USDT  
       2023-08-11 10:52:51 +08:00
    这个得要 js 来做 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getClientRects
    你看下这个页面,最底下那个 sample ,画了一堆框的,是不是满足你的需求?
    jifengg
        4
    jifengg  
       2023-08-11 11:15:38 +08:00
    楼主想要的
    是获取文字
    呈现出来的
    最终效果每
    一行的文本
    吧?

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

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


    接上楼,如果没理解错的话,lz 要的功能应该是这样的吧
    old9
        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
    old9
        10
    old9  
       2023-08-11 11:50:54 +08:00
    HAYWAEL
        11
    HAYWAEL  
       2023-08-11 12:23:15 +08:00
    我没看懂 你想要什么样的效果。或者说 你 现在遇到什么问题
    faust427
        12
    faust427  
    OP
       2023-08-11 14:19:28 +08:00
    对, 就是这个, 宽度不够一行文字不就会换行么, 现在就是需要用这个换行去分割原本的内容
    @SpiritQAQ 对的就是这个, 只是你给的网站一直转不出来东西...
    SpiritQAQ
        13
    SpiritQAQ  
       2023-08-11 14:32:56 +08:00
    heishu
        14
    heishu  
       2023-08-11 17:06:52 +08:00
    或许你需要的是 <pre></pre> 标签 ?
    chnwillliu
        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 不知道会不会有性能瓶颈。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3491 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 11:17 · PVG 19:17 · LAX 03:17 · JFK 06:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.