如何使用 Twig 在小屏幕尺寸上切片变量名称？

Question

为了保持我的 table 可读性，我想将移动屏幕上的变量名称分割为 15 个字符。如何执行下面的代码，使其仅在小屏幕上显示？

{{airline.name |length > 15 ? airline.name|slice(0, 15) ~ '...' :airline.name }}

Answer 1

像 twig 这样的服务器端渲染引擎无法访问浏览器的视口大小。

在较小的屏幕尺寸上剪切字符串和附加点的最佳实践解决方案是 CSS 属性 text-overflow 与 CSS 媒体查询相结合。

纯 CSS 解决方案，如果文本不适合元素并添加 3 个点而不是自动换行到下一行，则将文本剪切到 .element 内如下所示：

.element {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media (min-width: 768px) {
    .element {
        overflow: visible;
        white-space: normal;
        text-overflow: none;
    }
}

如何使用 Twig 在小屏幕尺寸上切片变量名称？

How to slice variable name on small screen sizes with Twig?

php

twig