如何在行内留出空格？

Question

我试图在一个表中留出几个空格，但是我做不到。但是在同一个表中，当我不使用javascript时，我可以做到这一点。

例如，在这个单元格中，我可以用 留下4个空格

            <td>
                {props.tcs.tl_conv + " / " + props.tcs.tl_int}&nbsp;&nbsp;&nbsp;&nbsp;
                {(props.lang == "es") ? String(props.tcs.tl_percentage).replace(".", ",") + "%" : props.tcs.tl_percentage + "%"}
            </td>

但在以前，我尝试用“".repeat(4)”“或”“留下4个空格。

            <td>{
                (props.lang == "es") ? 
                    String(props.tcs.t2p_conv_pp).replace(".", ",") + " / " + String(props.tcs.t2p_int_pp).replace(".", ",") +  
                    " ".repeat(4) + String(props.tcs.t2p_percentage).replace(".", ",") + "%"     
                    : 
                    props.tcs.t2p_conv_pp + " / " + props.tcs.t2p_int_pp + " ".repeat(4) + props.tcs.t2p_percentage + "%"
                }
            </td>

如何在这最后一段代码中留出空格？

Answer 1

你能使用模板字符串吗？模板字符串保持其格式。

`${props.tcs.t2p_conv_pp} / ${props.tcs.t2p_int_pp}    ${props.tcs.t2p_percentage}%`
                                    // spaces here ^^^^

Answer 2

'\xa0‘不是换行符，如果你把它们加在你的JS之间，你应该能够在不使用空格的情况下获得空格。

例如的

<td>{
       (props.lang == "es") ? 
       String(props.tcs.t2p_conv_pp).replace(".", ",") + " / " + 
       String(props.tcs.t2p_int_pp).replace(".", ",") +  
       '\xa0\xa0\xa0\xa0' + String(props.tcs.t2p_percentage).replace(".", ",") + "%":
       props.tcs.t2p_conv_pp + " / " + props.tcs.t2p_int_pp + " ".repeat(4) + 
       props.tcs.t2p_percentage + "%"
    }
</td>

不确定这是否是你要找的，但我希望这能有所帮助。

Answer 3

感谢@Rylee，我找到了解决方案。最后，我的一段代码是：

            <td>{
                (props.lang == "es") ? 
                    <span style = {{whiteSpace: "pre"}}>
                        {String(props.tcs.t2p_conv_pp).replace(".", ",") + " / " + String(props.tcs.t2p_int_pp).replace(".", ",") +  
                        "    " + String(props.tcs.t2p_percentage).replace(".", ",") + "%"}
                    </span>      
                    : 
                    props.tcs.t2p_conv_pp + " / " + props.tcs.t2p_int_pp + " ".repeat(4) + props.tcs.t2p_percentage + "%"
                }
            </td>

结果如下：

​

​