PHP 回声循环正在中断 CSS 弹性框

Question

看起来 PHP 回声循环正在抵消 css 弹性框。代码仍然动态显示，字体等与 css 正确对应，但是在页面上 "a" 标签不会换行。它们延伸到页面之外。

当我删除动态生成的 "a" 标签并对它们进行硬编码时，它们会换行。

你如何建议我将 php 内容循环到 html 中并使其与 css 弹性框一起使用？

CSS

.flex-center {
align-items: center;
display: flex;
justify-content: center;
}

HTML / PHP

    <div class="flex-center position-ref full-height">
        <div class="content">
            <div class="links">
                <?php
                foreach ($channels as $channel) {
                    $count ++;
                    echo   "<a>dasdsadsad</a>";
                }
                ?>
            </div>
        </div>

Answer 1

只需添加中断

echo "<a>dasdsadsad</a><br />";

希望这就是你想要的。

Answer 2

PHP 不关心换行。它不会回显换行符，除非你明确告诉回显它们。例如，可以使用这样的代码来完成：

foreach ($channels as $channel) {
    $count ++;
    echo   "<a>dasdsadsad</a>\n";  // note `\n` in the end of string
}

更多的跨平台解决方案是使用 PHP_EOL（行尾）常量，其中包含 "\r\n" 或 "\n"，具体取决于服务器的操作系统：

foreach ($channels as $channel) {
    $count ++;
    echo   "<a>dasdsadsad</a>" . PHP_EOL;
}

类似这样的东西也可能有效（但需要检查）：

foreach ($channels as $channel) {
    $count ++;?>
    <a>dasdsadsad</a>
<?php
}

还包括@devpro 解决方案 css:

.flex-center .links a { display: block; }

PHP 回声循环正在中断 CSS 弹性框

PHP echo loop is breaking CSS flex box

css

php

echo

flexbox