動態

詳情 返回 返回

前端頁面單詞、網址溢出換行 - 動態 詳情

效果:
image.png
在css中,對文字可以使用:flex-wrap: wrap; 來實現文字溢出換行。
但如果文字是英文、網址,該屬性則無效。
我們需要對英文、網址進行斷字,然後使其換行,下面是mdn的解釋:
image.png

    .company_detail_webaddress{
        max-width: 55%;
        margin-right: 10rpx;
        word-wrap: break-word; // 控制長度超過一行的單詞是否被拆分換行
        word-break: break-all; // 單詞斷行
        white-space: pre-line; // 處理空白字符
    }

white-space,控制空白字符的顯示,同時還能控制是否自動換行。它有五個值:normal | nowrap | pre | pre-wrap | pre-line

word-break,控制單詞如何被拆分換行。它有三個值:normal | break-all | keep-all

word-wrap(overflow-wrap)控制長度超過一行的單詞是否被拆分換行,是word-break的補充,它有兩個值:normal | break-word

Add a new 評論

Some HTML is okay.