仅使用 javascript / jquery 在 div 中居中多行文本？ （模拟 css text-align 属性）

Question

我需要在不使用 css 的情况下将 div 中的多行文本居中，仅使用 js。 例如，我有一个 170px 宽度的 div，一个 SourceSansPro-Regular 字体和 18px 字体大小，例如：

我有
一个
厨房

我想要达到的结果是在这个 170px 宽度的 div 中将每一行居中，就像在每个单词之前和之后添加空格一样。

这是我的代码，但现在没有好的结果：

//输入是我的文本 功能str_pad（输入）{ 部分 = input.split('\n'); 部分 = 部分.trim(); //容器是我的 170px 宽度的 div var container = $(".pc-editable-canvas-positions-active .pc-active-editable-canvas .p​​c-rectangle"); var size = get_char_size(container); var chars_per_line = get_num_chars（容器，大小）； 最大 = chars_per_line; 部分 = 部分.map(s => s 。修剪（） .padStart(s.length + Math.floor((max - s.length) / 2), '\xa0') .padEnd(max, '\xa0') ); 控制台日志（部分）； newInput = parts.join('\n'); 返回新输入； } 函数 get_char_size(div) { var temp = $(' ').appendTo(div); //temp 是一个带有“nbsp”的跨度 var rect = $(".pc-rectangle").find('span')[0].getBoundingClientRect(); 变量结果 = { 宽度：矩形宽度， 高度：rect.height }; temp.remove(); 返回结果； } 函数 get_num_chars(div, char_size) { var 宽度 = div.width(); 返回 Math.floor(width / char_size.width); }

每一行都以自己为中心，但不在我的 div 中。 如果我在get_char_size 函数的范围内更改字符，则文本会向左或向右移动，但不会在 div 中居中..

如何做到这一点？我忘记正确设置每个文本行的长度并在它们之前和之后添加足够的空间来模拟文本对齐中心？

感谢您的帮助

Answer 1

试试这个：

<div id="center-div">i have
a
kitchen</div>

const fontConstant = 1.91; // for font-family: Arial, sans-serif

const div = document.getElementById("center-div");

const style = window.getComputedStyle(div, null).getPropertyValue('font-size');
const fontSize = parseFloat(style);

const charactersPerRow = div.offsetWidth / (fontSize / fontConstant);

const innerHtml = div.innerHTML;

const words = innerHtml.split('\n');

const centeredWords = words.map(word => {
  const spacesToAdd = Math.round((charactersPerRow - word.length) / 2);
  let spaces = '';
  for (let i = 0; i < spacesToAdd; i++) {
    spaces += ' ';
  }
  return spaces + word + spaces;
});

let newInnerHtml = '';

centeredWords.forEach(word => {
    newInnerHtml += word + '\n'
});

div.innerHTML = '<pre>' + newInnerHtml + '</pre>';