整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          表格文字對(duì)齊及文字表格內(nèi)換行

          表格文字對(duì)齊及文字表格內(nèi)換行

          格文字對(duì)齊和文字表格內(nèi)換行。

          將Excel表格中文字進(jìn)行對(duì)齊。

          ·第一種方法:可以直接在文字中敲擊空格鍵來進(jìn)行手動(dòng)對(duì)齊,但這樣比較慢??梢赃x中需要對(duì)齊文字的單元格,單擊右鍵,選擇設(shè)置單元格格式,點(diǎn)擊對(duì)齊。在水平對(duì)齊方式那里選擇分散對(duì)齊,點(diǎn)擊確定。這樣就實(shí)現(xiàn)了表格內(nèi)文字的對(duì)齊,對(duì)Excel表格中文字實(shí)現(xiàn)換行。

          ·如果直接敲擊enter鍵,就從一個(gè)表格跳到下一個(gè)表格,那么實(shí)現(xiàn)表格內(nèi)的換行??梢詫⒐鈽?biāo)定位在準(zhǔn)備換行的位置,使用Alt加Enter鍵,這樣就實(shí)現(xiàn)了文字表格內(nèi)換行。

          ,各位同學(xué)們好呀!我是小E~

          小E還為同學(xué)們準(zhǔn)備了40+Excel函數(shù)大全,獲取直接在公種號(hào)【秋葉Excel】回復(fù)【頭條】即可~

          使用Vue開發(fā)前端頁面的時(shí)候,難免會(huì)遇到接收的字符串過長,需要讓字符串換行。以往在HTML頁面開發(fā)中,常用的方法是word-wrap:break-word;添加上這行代碼后,在塊元素定義的寬度不夠時(shí)輸出的文本內(nèi)容就會(huì)換行。但是在vue中使用word-wrap屬性就不起作用,網(wǎng)上查找資料說使用white-space:pre-line;就可以實(shí)現(xiàn)換行。本文就簡單介紹下white-space的使用。

          因?yàn)槲覜]有系統(tǒng)的學(xué)過前端,就是遇到一點(diǎn)問題學(xué)習(xí)一點(diǎn)前端知識(shí)。當(dāng)我在這次實(shí)現(xiàn)換行效果的過程中就學(xué)習(xí)使用了white-space的用法。

          首先按照網(wǎng)上的資料,直接添加white-space:pre-line; 是實(shí)現(xiàn)了換行,但是換行卻是從第二行中間開始的。具體效果大概如下圖:

          為什嗎會(huì)有這個(gè)效果呢?第一反應(yīng)是有空格產(chǎn)生了,哪里來的空格呢?那就是接收的后端傳遞的字符串中有空格,于是就想辦法去處理接收的變量,嘗試了以下兩種方法:

          (1)添加一層盒子嵌套,父盒子font-size:0,子盒子font-size:12px;

          .tabBox_tit {
            border: 1px solid red;
            width: 175px;
            height: 50px;
            white-space: pre-line;
            font-size: 0;
            margin: 0 2px 0 10px;
            letter-spacing: 1px;
            box-sizing: border-box;
          }
          .tabBox_tit span {
            font-size: 16px; /* 根據(jù)需求設(shè)置具體的字體大小 */
          }
          
          /*說明如下:
          
          將 white-space 屬性的值從 pre-wrap 修改為 pre-line,這樣文本可以從第一行第一個(gè)字符輸出并且可以自動(dòng)換行。
          將 font-size 屬性的值設(shè)為 0,以去除在HTML中的空格(空格、回車等),避免產(chǎn)生不必要的空隙。
          將 .tabBox_tit 框架內(nèi)的文字大小設(shè)為 0 ,因?yàn)榍懊嬉呀?jīng)有了一個(gè)全局修改,
          并通過 .tabBox_tit span 選擇器來單獨(dú)指定文字的大小,這樣可以避免子元素繼承父元素的字體大小。
          */
          復(fù)制代碼

          (2)使用flex布局讓內(nèi)容居中

          .tabBox_tit {
            border: 1px solid red;
            width: 175px;
            height: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            font-size: 16px; /* 根據(jù)需求設(shè)置具體的字體大小 */
            margin: 0 2px 0 10px;
            letter-spacing: 1px;
            box-sizing: border-box;
          }
          /*
          說明如下:
          將 white-space 屬性去掉,因?yàn)槭褂?flex 屬性后不需要再用這個(gè)屬性來控制文本輸出。
          添加 display: flex 屬性,并設(shè)置 flex-direction: column,這樣會(huì)將容器中的元素按列排列。
          添加 justify-content: center 和 align-items: flex-start 屬性,這樣可以使文字垂直居中并從左側(cè)對(duì)齊。
          */
          復(fù)制代碼

          經(jīng)過以上兩種方式的設(shè)置,文本輸出樣式還是和上面的截圖一樣,從第二行中間開始輸出。這樣嘗試的時(shí)候,沒有實(shí)現(xiàn)效果,導(dǎo)致我懷疑自己flex布局的知識(shí)點(diǎn)沒有學(xué)好,又去重新溫習(xí)了一遍flex布局的文檔。改來改去一個(gè)小時(shí)就過去了。內(nèi)心有點(diǎn)失敗的挫折感。這個(gè)時(shí)候,是不是就說明換行符號(hào)不是從變量里面?zhèn)鬟f過來的呢?

          于是,再去查看代碼,發(fā)現(xiàn)了代碼被編輯器格式話之后換行了,在網(wǎng)上查找資料也終于瞅到有人說到這一點(diǎn)了。于是嘗試了修改VUE的模板代碼,代碼如下:

             <!--修改后-->
                        <span class="tabBox_tit line1">
                          <span class="font-color-red" v-if="val.cart_info.is_gift">贈(zèng)品</span>{{ val.cart_info.productInfo.store_name + ' | ' }}{{val.cart_info.productInfo.attrInfo?val.cart_info.productInfo.attrInfo.suk: ''}}
                        </span>
                        <!--修改前 -->
                        <span class="tabBox_tit line1">
                          <span class="font-color-red" v-if="val.cart_info.is_gift">贈(zèng)品</span>
                          {{ val.cart_info.productInfo.store_name + ' | ' }}
                          {{val.cart_info.productInfo.attrInfo?val.cart_info.productInfo.attrInfo.suk: ''}}
                        </span>
          復(fù)制代碼

          讓后,讓后我想要的功能就實(shí)現(xiàn)了。到這里不得不感慨前端的水真的很深,原來代碼格式化也并不是所有的代碼都可以使用的。

          基于以上的折騰分析,總結(jié)一下,Vue實(shí)現(xiàn)輸出文本自動(dòng)換行的效果:要做到以下兩點(diǎn):1.HTML代碼塊不能格式化換行,2.使用white-space:pre-line; 這樣就可以了。

          正常情況下到這里都應(yīng)該寫完了。但是我又有點(diǎn)強(qiáng)迫癥,總覺得不能格式化的代碼不好看,或者以后不小心格式化了,文本輸出這里又出現(xiàn)問題豈不是很不美。于是去查下white-space這個(gè)屬性的定義,通過菜鳥教程學(xué)習(xí)到了更好的解決方法,附菜鳥截圖:

          根據(jù)教程,知道了想實(shí)現(xiàn)換行效果又可以格式化代碼使用:white-space:normal;就可以了。

          以上就是前端white-space屬性學(xué)習(xí)的痛苦經(jīng)過。希望能幫助到你


          作者:沐道PHP
          鏈接:https://juejin.cn/post/7221341862116540471
          來源:稀土掘金
          著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。


          主站蜘蛛池模板: 国产伦精品一区二区三区在线观看| 日韩视频在线一区| 亚洲精品精华液一区二区| 国产精品日韩欧美一区二区三区| 亚洲午夜福利AV一区二区无码| 日本一区二区视频| 少妇无码一区二区三区免费| a级午夜毛片免费一区二区| 国产一区二区影院| 日美欧韩一区二去三区| 加勒比无码一区二区三区| 亚洲一区二区三区在线观看蜜桃| 国产成人精品视频一区| 久久人做人爽一区二区三区 | 无码人妻一区二区三区兔费| 亚洲天堂一区二区| 无码人妻一区二区三区在线视频| 亚洲日本一区二区三区在线| 久夜色精品国产一区二区三区| aⅴ一区二区三区无卡无码| 美女AV一区二区三区| 国产免费私拍一区二区三区| 国产在线视频一区二区三区| 八戒久久精品一区二区三区| 午夜精品一区二区三区在线观看| 动漫精品一区二区三区3d| 亚洲国产精品一区二区九九| 久久毛片免费看一区二区三区| 国产在线观看一区二区三区精品| 久久99精品免费一区二区| 日韩免费观看一区| 精品国产一区二区三区久久久狼| 99在线精品一区二区三区| 国产精品乱码一区二区三| 无码精品蜜桃一区二区三区WW| 中文字幕一区二区在线播放| 一区二区三区在线|欧| 国产精品一区二区毛卡片| 亚洲视频一区二区| 亚洲欧洲一区二区| 精品国产日韩一区三区|