时间戳

首页 > 解决方案 > 如何返回原始文本并保持其形状和结构？

php - 如何返回原始文本并保持其形状和结构？

问题描述

我创建了一个迷你应用程序，用户可以在其中粘贴任何文本并共享它。假设用户在下面输入这些文本。

前任。

╔══╗
╚╗╔╝
╔╝(¯`v´¯)
╚══`.¸.[Stackoverflow]

当我将它加载到 textarea 时，它会正确显示。

在此处输入图像描述

关联

但是当我返回原始的那个

我一直在显示内联（损坏）

╔══╗ ╚╗╔╝ ╔╝(¯`v´¯) ╚══`.¸.[Stackoverflow]

关联

我所做的就是这个

public function raw($uuid)
{
    $paste  = Paste::where('uuid', base64_decode($uuid))->first();

    if($paste->type == 'json'){
        return response()->json($paste->data);
    } else {
        return $paste->raw;
    }
    
}

如何保持与在 textarea 中呈现的格式相同的格式？

例 2。

在文本区域显示

▀██▀─▄███▄─▀██─██▀██▀▀█
─██─███─███─██─██─██▄█
─██─▀██▄██▀─▀█▄█▀─██▀█
▄██▄▄█▀▀▀─────▀──▄██▄▄█

原始响应

正如您在原始文件中看到的那样，它显示得非常糟糕......

▀██▀─▄███▄─▀██─██▀██▀▀█ ─██─███─███─██─██─██▄█ ─██─▀██▄██▀─▀█▄█▀─██▀█ ▄██▄▄█▀▀▀─────▀──▄██▄▄█

编辑

如果我将它包裹在pre标签上

return '<textarea style="width: 100%; height: 100%;">'. $paste->raw.'</textarea>';

我得到了更好的结果

在此处输入图像描述

标签： phphtmlcsslaravel

解决方案

不必将文本包装在<pre></pre>标签中，只需将 CSS 属性white-space: pre应用于您正在收集该文本的任何 textarea 或其他元素。

这是preCSS 属性的文档：MDN Web Docs：white-space

这将迫使换行符得到尊重。那也应该复制和粘贴就好了。您现有的解决方案似乎对我来说也可以复制和粘贴。确保对该文本框使用等宽字体，因为这是保持所有列对齐所必需的。

您可以在 Google 字体上找到大量免费的等宽字体选项：https ://fonts.google.com/?category=Monospace

例子

没有 white-space: pre

** 确保单击下面的“运行代码片段”按钮以查看渲染预览

<div id="ascii-art" contenteditable>╔══╗
╚╗╔╝
╔╝(¯`v´¯)
╚══`.¸.[Stackoverflow]</div>

✅带有 white-space: pre等宽字体

** 确保单击下面的“运行代码片段”按钮以查看渲染预览

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

#ascii-art {
  font-family: 'Roboto Mono', monospace;
  white-space: pre;
}
<div id="ascii-art" contenteditable>╔══╗
╚╗╔╝
╔╝(¯`v´¯)
╚══`.¸.[Stackoverflow]</div>

奖金

如果您想让所有字符紧密并靠在一起，请添加以下 CSS：

white-space: pre;
font-family: consolas;
letter-spacing: -0.3px;
line-height: 1.19;

更改字体系列和字体大小时，需要稍微调整字母间距和行高值。这是您提供的两幅作品的 CSS 实际效果：

#ascii-art {
  white-space: pre;
  font-family: consolas;
  letter-spacing: -0.3px;
  line-height: 1.19;
}
<div id="ascii-art" contenteditable>▀██▀─▄███▄─▀██─██▀██▀▀█
─██─███─███─██─██─██▄█
─██─▀██▄██▀─▀█▄█▀─██▀█
▄██▄▄█▀▀▀─────▀──▄██▄▄█

╔══╗
╚╗╔╝
╔╝(¯`v´¯)
╚══`.¸.[Stackoverflow]</div>

推荐阅读