javascript - PHP/Javascript 中的文本修改

Question

我带着一个复杂的问题来到这里。 A想法是修改并打印从文件中读取的文本，就像 PostIt-Generator 一样。

• 从 .txt 文件读取文本(完成)
• 通过ajax将文本作为字符串传递给php，并带有一些格式选项(颜色、字体、大小)

• 按“生成”按钮，修改文本并按照尺寸打印(Post It 尺寸 76 毫米 x 76 毫米)

              var f = file;
              if (f) {
                  var reader = new FileReader();
                  reader.onload = function (e) {
                      var contents = reader.result;
                      console.log(contents);
                      $('#filePreview').html(contents);
                      $('#filePrintPreview').html(contents);
                  };
                  reader.readAsText(f);
              } else {
                  alert("Failed to load file");
              }
  

到目前为止，我能够通过 dropzone 成功加载 txt 文件。获取其内容并将其作为具有可变颜色和字体的纯文本放置在预览 div 中。

现在我需要将其插入具有所选尺寸的“容器”中，例如邮寄尺寸(76mmx76mm)。如果文件中的文本对于所选字体大小来说太长，无法放入“容器”中，则应出现某种警告。因此我想我必须用像素计算字体高度并将像素大小转换为毫米。如果用 javascript 更容易实现，我愿意接受一切。有什么建议吗？

为了更好的可视化，这是输入形式:

Answer 1

你应该为你的“容器”使用CSS属性overflow(我想你需要overflow:hidden)。并检查文本是否适合您的“容器”:

if (element.offsetHeight < element.scrollHeight ||
   element.offsetWidth < element.scrollWidth) {
   // your element have overflow
} else {
   // your element doesn't have overflow
} 

请参阅此答案以了解更多详细信息:Check with jquery if div has overflowing elements