Angular文本行间距异常问题求助

情况1：直接调整文本区域（textarea）的行间距 #

如果只是想让文本区域内的每行内容有足够间距，直接给textarea添加自定义CSS即可——之前调整容器高度没用是因为行间距由文本自身的line-height属性控制：

/* 可在组件样式文件或全局样式文件中添加 */
textarea {
  line-height: 1.8; /* 根据需求调整数值，越大行间距越大 */
  white-space: pre-line; /* 保留输入的换行，同时自动适配换行 */
  padding: 0.5rem; /* 可选，增加内边距让内容更美观 */
}

情况2：将输入内容渲染为真正的列表 #

如果你的需求是把文本区域中每行输入的食材，渲染成带-的独立列表项（而非仅在textarea内显示），可以通过Angular的事件绑定和列表渲染实现：

1. 组件类代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-ingredient-input',
  templateUrl: './ingredient-input.component.html',
  styleUrls: ['./ingredient-input.component.css']
})
export class IngredientInputComponent {
  ingredients: string[] = [];

  handleInput(event: Event) {
    const inputValue = (event.target as HTMLTextAreaElement).value;
    // 按换行分割内容，过滤空行
    this.ingredients = inputValue.split('\n').filter(line => line.trim().length > 0);
  }
}

2. 模板代码 #

<textarea 
  rows="5" 
  placeholder="输入食材，每行一个"
  (input)="handleInput($event)"
></textarea>

<!-- 渲染成目标样式的列表 -->
<div class="ingredient-list">
  <p *ngFor="let item of ingredients">- {{ item }}</p>
</div>

3. 列表样式 #

.ingredient-list p {
  margin: 0.6rem 0; /* 控制列表项之间的间距 */
}

以上两种方案都能实现你要的效果，无需纠结Bootstrap默认样式，自定义CSS即可覆盖调整。

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