文字域實現文字環繞的效果

2021-09-08 14:01:00 字數 804 閱讀 5707

估計你看到這個標題是懵逼的,直接上圖吧!

下面那個 「退訂***」那個位置好實現,可是上面那個「【簽名】」的文字環繞效果要怎麼實現呢?一開始想的是浮動,但是文字域不像單純的文字,無法實現這種文字環繞,該方案pass。後面想著單純用絕對定位,發現遇到的問題跟浮動是一樣的,該方案pass。後面一想,這個樣子不就是所謂的首行縮排嗎?直接用text-indent不就好了?!

主要布局如下:

主要css**如下:

因為「【簽名】」那裡是變數,所以文字域的text-indext值是不一定的。考慮到這是個彈層,預設是隱藏的,「【簽名】」裡面內容的寬度需要在彈層顯示後才能獲取到,js**如下:

//messagetemplateaddmodal是彈層的id

$('#messagetemplateaddmodal').on('shown.bs.modal', function () );

遇到問題的時候不要被自己的思維給侷限了。

PS 如何製作環繞文字效果

最終效果 地球素材 1 開啟素材,使用橢圓選區工具按住shift繪製正圓選區 2 轉到路徑面板,將選區變為工作路徑 3 選擇文字工具,在路徑上輸入文字 4 ctrl t,按住ctrl alt,滑鼠拖動左上角的定位點進行透視變換 5 ctrl r開啟標尺,從上側和左側標尺拖出輔助線 輔助線緊靠地球的邊...

css避免文字環繞

制訂的專案管理方案 各項服務專案補助經費參考標準 資金撥付方案 資金支出範圍 資金管理制度不符合國家衛生計生委 財政部有關要求,共 type number div div step4 firstitem step4 firstcheck step4 firstmain class step4 fir...

Css實現文字豎排效果

css實現文字豎排效果 詞曰 滾滾長江東逝水,浪花淘盡英雄。是非成敗轉頭空 青山依舊在,幾度夕陽紅。白髮漁樵江渚上,慣看秋月春風。一壺濁酒喜相逢 古今多少事,都付笑談中。話說天下大勢 分久必合,合久必分 週末七國分爭,併入於秦。及秦滅之後,楚 漢分爭,又併入於漢。漢朝自高祖斬白蛇而起義,一統天下。後...