如何在Word中批量添加填空題的下劃線？

日常工作中，經常需要在原有的Word文檔基礎上，將指定內容抹去，變成供填充內容的下劃線，如下，將下圖中的以下所有<>及其包含的內容替換成下劃線；

續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第20天，點擊查看活動詳情

本文簡介

點贊 + 關注 + 收藏 = 學會了

在 HTML 也好，Word 也好，基本都有下劃線和刪除線（中劃線）。

Fabric.js 作為一個老牌 canvas 庫，當然也提供中劃線和下劃線的配置啦，除此之外還提供了上劃線的配置。

本文要講解的就是這3種裝飾線在 fabric.js 中的使用方法。除了初始化配置外，還支持項目運行時，讓用戶動態配置。

本文案例使用了 IText ，該組件支持編輯功能。

初始化時設置

這是上劃線、中劃線和下劃線的文檔：

上劃線 overline
中劃線 linethrough
下劃線 underline

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<script src="../../script/fabric.5.2.1.js"></script>
<script>
  const canvas = new fabric.Canvas('c')

  const iText = new fabric.IText('aaa',{
    styles: {
      0: {
        0: { overline: true }, // 上劃線
        1: { linethrough: true }, // 中劃線
        2: { underline: true } // 下劃線
      }
    }
  })

  canvas.add(iText)
</script>

本例只有3個字母 a ，而且都在同一行。

styles 第一個元素的 key 為 0 的意思是第一行，行號下標從0開始。

大概這個意思

styles: {
  0: { // 第1行
    0:, // 第1行 第1個字
    1:, // 第1行 第2個字
    2:  // 第1行 第3個字
  }
}

如果需要換行，那就要根據行號來定義了。換行的方法是文本內容里使用 \n 做換行。

動態設置

除了在初始化時可以設置裝飾線外，Fabric.js 也提供了在運行時用戶手動設置。不過代碼會稍微復雜一點。

其實動態設置上劃線、中劃線和下劃線的操作都是一樣的，唯一要變的就是屬性名。

我以中劃線為例，之后上劃線和下劃線只需改個屬性名。

<button onclick="linethrough()">中劃線</button>

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<!-- 引入fabric -->
<script src="../../script/fabric.5.2.1.js"></script>
<script>
  const canvas = new fabric.Canvas('c') // 初始化畫布

  const iText = new fabric.IText('hello wor\nld') // 創建文字

  canvas.add(iText)

  function linethrough() {
    let activeTxt = canvas.getActiveObject() // 獲取當前選中的文字

    // 如果當前沒選中文字，那什么都不操作
    if (!activeTxt) return

    // 判斷當前是否進入編輯狀態
    if (activeTxt.isEditing) {
      // 編輯狀態
      const state = activeTxt.getSelectionStyles().find(item => item.linethrough !== true)

      // 如果當前
      if (!state || (JSON.stringify(state) === '{}' && activeTxt['linethrough'] === true)) {
        // 如果當前已經設置了中劃線，那就把全局中劃線取消
        activeTxt.setSelectionStyles({ 'linethrough': false })
      } else {
        // 如果當前沒設置中劃線，那就添加上中劃線
        activeTxt.setSelectionStyles({ 'linethrough': true })
      }
    } else {
      // 選擇狀態
      if (activeTxt['linethrough'] === true) {
        activeTxt.linethrough = false
        activeTxt.dirty = true;
        let s = activeTxt.styles
        for(let i in s) {
          for (let j in s[i]) {
            s[i][j].linethrough = false
          }
        }
      } else {
        activeTxt.linethrough = true
        activeTxt.dirty = true;
        let s = activeTxt.styles
        for(let i in s) {
          for (let j in s[i]) {
            s[i][j].linethrough = true
          }
        }
      }
    }

    canvas.renderAll()
  }
</script>

上面的代碼主要做這幾步操作：

初始化畫布
創建文字
將文字添加到畫布中
linethrough 方法添加或取消中劃線

最主要的操作邏輯寫在 linethrough 方法里了。

linethrough 的邏輯如下

獲取當前選中的文字
如果沒選中就不做任何操作
如果選中了，判斷是否進入編輯狀態
編輯狀態獲取當前被選中文字的中劃線狀態如果被選中文字設置了中劃線，就把中劃線取消掉如果被選中文字沒設置中劃線，就添加中劃線
如果不是編輯狀態，只是單擊了 iText 進入框選狀態如果需要全局取消中劃線全局取消循環每個字符，并取消每個字符的中劃線需要全局設置中劃線全局設置再逐個字符單獨設置
重新渲染畫布

代碼倉庫

?IText 動態設置裝飾線

https://gitee.com/k21vin/fabricjs-demo/blob/master/tutorial/IText/styles04decoration.html

端網頁的開發中總是不可避免會使用到超鏈接，但是使用超鏈接時下面都會有一條下劃線，這在網頁中有時會顯得很突兀，不合適也不美觀，所以我們就需要將超鏈接下的這條下劃線給去掉.接下來給大家介紹Html下超鏈接去掉下劃線的方法

您可以使用CSS的text-decoration屬性來去掉超鏈接下劃線。只需將其設置為none即可，示例代碼如下:

text-decoration: none;

}

這會將頁面中所有超錐接下劃線都去，如果您只想去掉某些超鏈接的下劃線，可以為這些鏈接添加一個特定的class，并針對該CIass設置上述CSS屬性。

例子：

<!DOCTYPE html>

<html>

<head>

<title>css超鏈接去掉下劃線示例</title>

<style>

text-decoration: none;

}

</style>

</head>

<body>

<a href="">大家再看我還有沒有下劃線了！</a>

</body>

</html>

可以發現，此時文本超鏈接下劃線是不是已經去掉了？這個效果實現是不是非常簡單呢？大家主要掌握一個樣式屬性就是text-decoration: none;這個屬性。給對應的a標簽文本添加這個屬性就可以去除文本超鏈接下劃線了。

擴展資料：

HTML 超鏈接(鏈接)的屬性：

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。

我們通過使用標簽在 HTML 中創建鏈接。

有兩種使用標簽的方式：

1、通過使用 href 屬性 - 創建指向另一個文檔的鏈接；

2、通過使用 name 屬性 - 創建文檔內的書簽。

在線咨詢

上一篇：html網頁源碼加密
下一篇：十天學會html+css第九天懸浮窗口固定定位 #網站

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。