如何用JavaScript/p5.js实现文本溢出？求HTML/CSS入门到进阶教程

你完全可以只用p5.js的内置能力实现自适应文本溢出效果，不需要硬编码窗口断点：

• p5提供了textWidth()内置函数，可以直接测量指定文本在当前字号下的实际渲染宽度，你可以基于这个接口实现自动换行逻辑，逻辑如下：
  1. 提前设定文本的最大允许宽度，一般是窗口宽度减去你预留的左右边距
  2. 把待渲染的文本按空格拆分为单词数组
  3. 逐个拼接单词，每次拼接后用textWidth()测量当前行的总宽度，一旦超过最大宽度就插入换行符\n，重新开始拼接下一行
  4. 用p5内置的windowResized()回调监听窗口大小变化，每次窗口调整时重新计算一次换行后的文本即可
• 如果需要的是超出后显示省略号的截断效果，只需要调整逻辑：拼接单词直到宽度接近最大宽度后，直接截断后续内容并拼接...即可。

下面是可直接运行的参考代码：

let rawContent = "这是一段很长的测试文本，你可以替换成你自己的内容 Example Text";
let wrappedText = "";
let maxTextWidth;
const fontSize = 16;
const padding = 20;

function setup() {
  createCanvas(windowWidth, windowHeight);
  maxTextWidth = windowWidth - padding * 2;
  calculateWrapText();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  maxTextWidth = windowWidth - padding * 2;
  calculateWrapText(); // 窗口大小变化时重新计算换行
}

function calculateWrapText() {
  const words = rawContent.split(" ");
  let currentLine = "";
  wrappedText = "";
  textSize(fontSize); // 测量宽度的字号要和渲染时一致
  
  for (let i = 0; i < words.length; i++) {
    const testLine = currentLine + words[i] + " ";
    const lineWidth = textWidth(testLine);
    if (lineWidth > maxTextWidth && i > 0) {
      wrappedText += currentLine + "\n";
      currentLine = words[i] + " ";
    } else {
      currentLine = testLine;
    }
  }
  wrappedText += currentLine;
}

function draw() {
  background(255);
  fill(0);
  textSize(fontSize);
  text(wrappedText, padding, 30);
}

• 除此之外还有折中方案：你可以用p5的createDiv()方法直接创建DOM元素渲染文本，给DOM元素添加简单的样式就能直接复用浏览器原生的排版能力，不需要自己写换行逻辑，也不用完整学习HTML/CSS的全部内容。

• 如果只是当前这一个文本溢出的需求，用上面的p5原生方案就足够，不需要额外学习新内容；如果后续还有大量页面排版、布局相关的需求，优先学习HTML/CSS的性价比更高，类似文本溢出的需求用CSS只需要2-3行属性就能实现，比手写JS计算逻辑性能更好、维护成本更低。
• 学习可以按照从基础到进阶的路径走：先学习HTML常用标签的用法，再学习CSS基础选择器、盒模型、文本排版属性，之后进阶学习弹性盒、网格布局、响应式适配相关的内容即可。你已经有JavaScript基础，理解HTML/CSS的逻辑会非常快，入门到能满足常规排版需求只需要1-2周的时间。
• 用CSS实现文本溢出的逻辑非常简单：块级元素默认就会根据容器宽度自动换行；如果需要单行超出显示省略号，只需要设置overflow: hidden、text-overflow: ellipsis、white-space: nowrap三个属性即可，多行溢出省略也有对应的成熟属性支持。

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