1. 程式人生 > >文章段落首字母縮排兩個字元

文章段落首字母縮排兩個字元

在處理文字比較多的頁面的時候,顯示資料想要段落首字母縮排兩字字元,這個功能p標籤預設並不能幫我們實現,這樣的文字顯示出來很難看,就像下面

<template>
  <section class="p-10">
    <div class="app">
      <p>有一個小山村,很久很久都沒有下雨了,老百姓吃完了糧食,吃草根,吃完了草根,吃樹皮,到最後沒有任何東西能填飽肚子,無數身邊的人離開了,老人死去了,弱小的孩子死去了,村裡的年青人不知如何是好。 於是他們就去找智慧老人,智慧老人說,這是對神靈的不敬,需要派人去採集光滑,有靈性,中間有縫,左右對稱的卵石,取其中的一塊,雕刻成佛,讓石佛保佑眾生,村裡人都去找卵石了,採集卵石非常難,翻山、過河、找不到合適的石頭,其中有一個年輕人在採集的過程中又飢又餓,年青人想放棄,躺在石頭上想休息,忽然間發現,他躺得這塊石頭非常的光滑,左右對稱,與其他的石頭不一樣,難道這就是孿生石?</p>
    </div>
  </section>
</template>

 

 

 

如果想實現段落首字元縮排,只需要在樣式裡通過 text-indent 控制一下即可

 

<template>
  <section class="p-10">
    <div class="app">
      <p>有一個小山村,很久很久都沒有下雨了,老百姓吃完了糧食,吃草根,吃完了草根,吃樹皮,到最後沒有任何東西能填飽肚子,無數身邊的人離開了,老人死去了,弱小的孩子死去了,村裡的年青人不知如何是好。 於是他們就去找智慧老人,智慧老人說,這是對神靈的不敬,需要派人去採集光滑,有靈性,中間有縫,左右對稱的卵石,取其中的一塊,雕刻成佛,讓石佛保佑眾生,村裡人都去找卵石了,採集卵石非常難,翻山、過河、找不到合適的石頭,其中有一個年輕人在採集的過程中又飢又餓,年青人想放棄,躺在石頭上想休息,忽然間發現,他躺得這塊石頭非常的光滑,左右對稱,與其他的石頭不一樣,難道這就是孿生石?</p>
    </div>
  </section>
</template>
<style lang="
scss"> .app p{ text-indent:2em; } </style>

 

 

 

嗯,就醬~~