如何将文本字段扩展到一行单词之后

.text-field {
  word-wrap: break-word;
}

var textField = document.getElementById('text-field');
var text = textField.innerText;
var words = text.split(' ');
var maxWidth = textField.offsetWidth;
var line = '';
var lines = [];

for (var i = 0; i < words.length; i++) {
  var word = words[i];
  var tempLine = line + ' ' + word;
  var tempWidth = getTextWidth(tempLine);

  if (tempWidth <= maxWidth) {
    line = tempLine;
  } else {
    lines.push(line);
    line = word;
  }
}

lines.push(line);
textField.innerText = lines.join('\n');

function getTextWidth(text) {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  context.font = getComputedStyle(textField).font;
  return context.measureText(text).width;
}

<?php
$text = $_POST['text'];
$words = explode(' ', $text);
$maxWidth = 80; // 设置最大宽度
$line = '';
$lines = [];

foreach ($words as $word) {
  $tempLine = $line . ' ' . $word;
  $tempWidth = getTextWidth($tempLine);

  if ($tempWidth <= $maxWidth) {
    $line = $tempLine;
  } else {
    $lines[] = $line;
    $line = $word;
  }
}

$lines[] = $line;
$result = implode('\n', $lines);
echo $result;

function getTextWidth($text) {
  // 计算文本宽度的逻辑
}
?>