如何在JavaScript/TypeScript中移除条形码下方的文本？

我用JavaScript结合Angular框架生成Code 128条形码，通过Libre Barcode 128 Text字体渲染，目前生成的条形码下方会显示对应的文本内容，希望隐藏该文本，只保留条形码图案。

我的相关代码 #

HTML代码 #

<div class="pr-2" style="width: 130px">
  <div *ngIf="!element.editing">
    <span class="ss">{{element.barcode}}</span>
  </div>
  <div *ngIf="element.editing">
    <input type="text" [(ngModel)]="element.barcode" style="width: 130px"/>
  </div>
</div>

CSS代码 #

.ss {
  font-family: 'Libre Barcode 128 Text', cursive;
  font-size: 22px;
}

JavaScript条形码生成函数 #

barcodeGenerator(value){

  let x = value
  let i, j, intWeight, intLength, intWtProd = 0, arrayData = [];
  let arraySubst = [ "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê" ];

/*
 * Checksum Calculation for Code 128 B
 */
  intLength = x.length;
    arrayData[0] = 104; // Assume Code 128B, Will revise to support A, C and switching.
    intWtProd = 104;
    for (j = 0; j < intLength; j += 1) {
            arrayData[j + 1] = x.charCodeAt(j) - 32; // Have to convert to Code 128 encoding
            intWeight = j + 1; // to generate the checksum
            intWtProd += intWeight * arrayData[j + 1]; // Just a weighted sum
    }
    arrayData[j + 1] = intWtProd % 103; // Modulo 103 on weighted sum
    arrayData[j + 2] = 106; // Code 128 Stop character
  const chr = parseInt(arrayData[j + 1], 10); // Gotta convert from character to a number
  if (chr > 94) {
    var chrString = arraySubst[chr - 95];
  } else {
    chrString = String.fromCharCode(chr + 32);
  }

    return 'Ì' + // Start Code B
    x + // The originally typed string
    chrString + // The generated checksum
    'Î'; // Stop Code
}

当前与期望效果 #

• 当前效果：条形码图案下方附带显示对应的文本内容
• 期望效果：仅显示条形码图案，无下方文本

解决方法 #

方法1：替换为无文本版本的字体（最简便） #

Libre Barcode系列有两个对应字体：Libre Barcode 128 Text（带下方文本）和Libre Barcode 128（仅渲染条形码）。直接修改CSS中的字体名称即可：

.ss {
  font-family: 'Libre Barcode 128', cursive;
  font-size: 22px;
}

方法2：通过CSS隐藏文本（适用于无法更换字体的场景） #

如果必须使用带Text的字体，可以通过CSS调整元素样式，将下方文本移出可视区域：

.ss {
  font-family: 'Libre Barcode 128 Text', cursive;
  font-size: 22px;
  display: inline-block;
  /* 压缩行高并隐藏溢出内容，只保留条形码部分 */
  line-height: 0;
  overflow: hidden;
  height: 20px; /* 根据字体大小调整高度，确保只显示条形码 */
}

内容的提问来源于stack exchange，提问作者Hamza Akram