PHP / Javascript中的文本修改答案

【问题标题】：Text Modification in PHP / JavascriptPHP / Javascript中的文本修改
【发布时间】：2017-01-04 11:29:29
【问题描述】：

我带着一个复杂的问题来到这里。一种想法是修改和打印从文件中读取的文本，例如 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 中更容易实现，我愿意接受一切。有什么建议吗？

为了更好的可视化，这是输入表单：

【问题讨论】：

标签： javascript php jquery file text

【解决方案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

【讨论】：

这对我调整文本大小有很大帮助。谢谢。