1. <p id="jjgzy"><strong id="jjgzy"><small id="jjgzy"></small></strong></p>

      1. <table id="jjgzy"></table>
        <object id="jjgzy"><nav id="jjgzy"></nav></object>

        一站式百度SEO排名優化!-找老劉SEO 低投入,高轉化,精益求精、一絲不茍:旨在提供更好的SEO服務!

        首頁>>網站建設

        【親測有效】百度編輯器ueditor前臺代碼高亮無法自動換行解決方法

        首頁 2022-09-24 網站建設 255 ℃Tags:


        網上搜索的解決辦法(測試無效)

        找到高亮代碼顯示的css文件  /e/data/ecmseditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css

        代碼如下:

        .syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px solid #ccc!important;
        }

        修改代碼如下:

        .syntaxhighlighter{
        width:100%!important;margin:.3em 0 .3em 0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px solid #ccc!important;
        word-break:break-all;//添加的代碼
        }

        具體的路徑根據你的ueditor做改動:就是加上  word-break:break-all;  可能不同的ueditor版本css寫法不一樣,只要對應的位置加上這個強制換行就可以了

        有效解決方法

        問題界定:各瀏覽器對pre標簽的解釋問題,針對 firefox,怎么使pre標簽內容自動換行?

        處理方法:在前臺文章模版樣式中加入以下樣式代碼

        <style type="text/css">
            pre {
                white-space: pre-wrap;
                word-wrap: break-word;
            }
        </style>

         完成,如果對你有幫助還請關注我哦!

        Ueditor plus

        默認的代碼塊不換行,效果如下:

        image.png

        添加一行word-break:break-all;

        .syntaxhighlighter {
        width: 100%!important;
        margin: .3em 0 .3em 0!important;
        position: relative!important;
        overflow: auto!important;
        background-color: #f5f5f5!important;
        border: 1px solid #ccc!important;
        border-radius: 4px!important;
        border-collapse: separate!important;
        word-break:break-all;
        }

        由于此shCoreDefault.css文件刪除了空格和換行,所以可讀性非常差,可以搜索.syntaxhighlighter{  然后添加word-break:break-all;

        然后清理瀏覽器緩存,再訪問查看效果:

        image.png

        網上也找到了word-break 參數說明:

        語法:

        word-break : normal | break-all | keep-all

        參數:

        normal :  依照亞洲語言和非亞洲語言的文本規則,允許在字內換行

        break-all :  該行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本

        keep-all :  與所有非亞洲語言的normal相同。對于中文,韓文,日文,不允許字斷開。適合包含少量亞洲文本的非亞洲文本

        說明:

        設置或檢索對象內文本的字內換行行為。尤其在出現多種語言時。

        對于中文,應該使用break-all 。

        本以為問題得到了徹底解決,但在電腦端訪問此文章,發現依然存在不會自動換行的情況,如下圖:

        一開始以為緩存原因,清理緩存,更換了瀏覽器測試還是存在問題。只要通過chrome 瀏覽器F12開發者模式,去查看css樣式情況,在一個個樣式排查下來,找到了罪魁禍首。

        white-space:nowrap到底什么作用,網上查了查資料:

        white-space:normal; 默認。依照亞洲語言和非亞洲語言的文本規則,允許在字內換行

        white-space:pre-wrap; 只對中文起作用,強制換行

        white-space:nowrap;  強制不換行,中文因為都起作用

        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不換行,超出部分隱藏且以省略號形式出現

        于是找到此style.css文件,搜索找到white-space: nowrap; 更改為 white-space: normal;保存以后清理瀏覽器緩存,再次訪問查看效果,發現已經自動換行。



        搜索
        分類
        熱門標簽
      2. 首頁
      3. 電話
      4. QQ
      5. ?
        聯系老劉手機
        1043025812
        聯系老劉微信
        掃描微信二維碼
        欧美激情一区二区|国产精品亚洲日韩欧美色窝窝色欲|亚洲jiZZjiZZ妇|国产精品白丝Jk黑袜喷水视

        1. <p id="jjgzy"><strong id="jjgzy"><small id="jjgzy"></small></strong></p>

          1. <table id="jjgzy"></table>
            <object id="jjgzy"><nav id="jjgzy"></nav></object>