为什么在我的代码中不能使用换行符(\ n)? [英] Why breaking line (\n) doesn't work in my code?

问题描述

我正在创建电视提供商和他们之间的联系表.

I'm creating table of TV providers and contacts to them.

您可以在此处看到的常规功能: https://imgur.com/u5uREJm

The general functionality you can see there: https://imgur.com/u5uREJm

表以某种方式构造，在每一行中都是带有提供者的按钮.单击此按钮后，在单击的内容下打开下一行，显示联系人信息.

Table is constructed in way, that in each row is button with provider. After clicking this button next row is opened under clicked one, showing contact information.

ContactRow包含2个单元格.在第一个电话中，我在第二个电话号码中添加了电子邮件.但是，它的显示效果不佳，联系人看起来像被吐出来了，而不是正确地格式化了.

ContactRow contains 2 cells. In the first one i put emails, in the second phone numbers. However it is not presented nicely, contacts looks like like the've been spit out instead of correctly formatted.

总体思路是，我想使用\n或<br/>的任何其他替代方式，以便可以将格式"的contactRow格式化为如下形式:

The general idea is that I would like to use \n or any other alternative to <br/> in order that I could format contactRow in form of "table" that will looks like this:

[e-mail] | 0-000-000-000 [e-mail] | [e-mail] | 0-000-000-000

[e-mail] | 0-000-000-000 [e-mail] | [e-mail] | 0-000-000-000

程序以这种方式工作:

1. 使用php创建表格并从contacts.txt
导入联系人
2. 单击带有提供程序的按钮将调用JavaScript函数specialFunc()传递位于按钮内部的提供程序.
3. specialFunc()调用其中的addRow()函数，下面将在伪代码中对这两个函数进行解释.

1. Using php I create table and import contacts from contacts.txt
2. Clicking button with provider calls a JavaScript function specialFunc() passing provider that was inside of button.
3. specialFunc() calls addRow() function inside of it, both of them will be explained in pseudocode below.

文件contacts.txt是以这种方式创建的:

File contacts.txt is created in this way:

PROVIDER1;[e-mail] [e-mail];0-000-000-000 0-000-00-00 PROVIDER2;[e-mail];0-000-000-000 0-000-00-00; PROVIDER3;[e-mail] [e-mail];0-000-000-000

PROVIDER1;[e-mail] [e-mail];0-000-000-000 0-000-00-00 PROVIDER2;[e-mail];0-000-000-000 0-000-00-00; PROVIDER3;[e-mail] [e-mail];0-000-000-000

因此，电子邮件的数量和电话号码的数量可能从0到6不等. JavaScript函数通过读取;

So that number of emails and number of phone numbers may vary from 0 to 6. JavaScript function chooses contacts by reading first word before ;

之所以可以在视频中看到格式很好的电子邮件，是因为在.css文件中，我将EmailCell和PhoneCell设置为自动换行文本，因此，对于电子邮件，第一个适合，第二个不适合，这就是为什么它已移至另一行.但是，这不是一个好方法，因为如果有简短的电子邮件，则在同一行中.

The reason why you can see emails formatted quite nicely in the video is because in .css file I made EmailCell and PhoneCell to be wrapping text, so in the case of emails, first one fits, second one not, that's why it's moved to other line. However this is not good approach, because if there are short emails there are in the same line.

我试图用;分隔contacts.txt中的每个电话号码，以进行测试和重新制作线路:provInfoPhone = contactsFromTxt[2];至

I tried to separate each phone number in contacts.txt by ; for testing and remade line: provInfoPhone = contactsFromTxt[2]; to

provInfoPhone = contactsFromTxt[2] + "\n" + concatsFroxTxt[3];

但是它没有任何帮助.它既没有以html的形式显示为"\ n"，也没有换行并将其移至下一个.

however it didn't help in any way. It's neither printed in html as "\n" nor breaking line and moving it to next one.

addRow(ProperIndexOfRow{wheretoinsert}){
    *code reffering to correct table, to correct position where to insert newRow*
    *code deleting previously added row(when someone is zapping over buttons)*
    let newCell = newRow.insertCell(0);
    let newText = document.createTextNode(provInfoEmail);
    newCell.appendChild(newText);
    let newCell2 = newRow.insertCell(1);
    let newText2 = document.createTextNode(provInfoEmail);
    newCell.appendChild(newText2);
}


specialFunc(prov) {
    switch(prov):
        case "EXAMPLE1":
            provInfoEmail = contactsFromTxt[1];
            provInfoPhone = contactsFromTxt[2];
            break;
        case "EXAMPLE2":
            provInfoEmail = contactsFromTxt[1];
            provInfoPhone = contactsFromTxt[2];
            break;
        [...]
    addRow(properIndex);
}

你能帮我吗?我知道我的问题需要大量的阅读和理解，但是我认为我缺乏一些解决此类问题的基本方法.

Could you help me? I know that my problem needs quite a lot of reading and understanding, but I believe I lack some of basic approaches to such problems.

推荐答案

我想您知道，HTML中的所有空白(包括制表符和换行符)都呈现为单个普通空间.要获得没有使用的CSS属性的换行符，您需要将它们分隔为不同的文本节点，并在中间插入一个br元素.大概是:

As I think you know, all whitespace including tabs and newlines in HTML is rendered as a single normal space. To get line breaks without the CSS properties you were using, you'll need to separate them into distinct text nodes with a br element in-between. Roughly:

let newCell2 = newRow.insertCell(1);
let first = true;
for (const entry of provInfoEmail.split("\n")) {
    if (first) {
        first = false;
    } else {
        newCell.appendChild(document.createElement("br"));
    }
}

这将对其中带有\n的字符串进行后处理.显然，如果您可以更早地进行此操作(在弄清楚\n应该在哪里时)，那会更好.

That post-processes your string with \n in it. Obviously if you can do this earlier (when you were figuring out where the \n should be), that would be better.

这篇关于为什么在我的代码中不能使用换行符(\ n)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！