如何让单词计数器的textarea文本左对齐且保持整体布局居中？

问题根源 #

1. textarea初始文本缩进：你的HTML里<textarea>标签内部包含换行和空格，导致初始显示时文本自带缩进，看起来并非左对齐。
2. 错误修改布局核心属性：你可能误改了.container的align-items: center属性，这是维持整体布局居中的关键，修改后会导致容器偏移。

修复步骤 #

1. 清理textarea的初始空白内容

HTML中<textarea>标签内部的换行和空格会被解析为初始内容，直接改为闭合式标签即可消除默认缩进：

<textarea id="area" placeholder="Enter your Text Here"></textarea>

2. 明确设置textarea左对齐样式

在#area的CSS规则中添加text-align: left，同时保留.container的align-items: center属性，确保整体布局居中：

#area {
  height: 200px;
  width: 400px;
  resize: none;
  font-size: 15px;
  font-weight: 700;
  padding: 5px;
  margin-top: 15px;
  color: green;
  outline: none;
  border: 2px dashed green;
  text-align: left; /* 明确设置左对齐 */
}

3. 修复JavaScript统计bug

原代码中content.trim()没有将处理结果赋值回变量，会导致空文本时单词统计错误，修正为：

content = content.trim();

完整修改后的代码 #

HTML

<div class="container">
  <div class="heading">
    <h1 style="color:green">Word counter</h1>
    <h2>Delete everything first!</h2>
    <h3><b>Word and Character count<b></h3>
  </div>
  <textarea id="area" placeholder="Enter your Text Here"></textarea>
  <p class="result">
    <span id="word">0</span> Words and
    <span id="char">0</span> Characters
  </p>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* 保留该属性，维持整体居中 */
}

.container h1 {
  font-size: 25px;
}

.container h3 {
  font-size: 20px;
}

.heading {
  border: 2px dashed green;
  padding: 5px;
  font-weight: 700;
  text-align: center;
  width: 400px;
}

#area {
  height: 200px;
  width: 400px;
  resize: none;
  font-size: 15px;
  font-weight: 700;
  padding: 5px;
  margin-top: 15px;
  color: green;
  outline: none;
  border: 2px dashed green;
  text-align: left; /* 明确左对齐 */
}

#area:focus {
  border: 2px dashed blue;
  outline: none;
}

.result {
  color: green;
  font-size: 20px;
  width: 401px;
  text-align: center;
  font-weight: 200;
  padding: 5px;
  border: 2px dashed green;
  margin-top: 10px;
}

#word,
#char {
  font-size: 25px;
  text-decoration: none;
}

JavaScript

let area = document.getElementById('area');
let char = document.getElementById('char');
let word = document.getElementById('word');

area.addEventListener('input', function() {
  // 统计字符数
  let content = this.value;
  char.textContent = content.length;

  // 修正：将trim结果赋值回变量
  content = content.trim();

  let wordList = content.split(/\s/);

  // 过滤空字符串
  let words = wordList.filter(function(element) {
    return element != "";
  });

  // 统计单词数
  word.textContent = words.length;
});

效果说明 #

• textarea内的所有文本（包括输入内容）将保持左对齐
• 页面整体布局通过flex布局的align-items: center维持居中，不会出现偏移
• 同时修复了空文本时单词统计错误的问题

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