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

Question

为了保持表格的可读性，我想将移动屏幕上的变量名称切成 15 个字符。如何执行下面的代码，使其仅在小屏幕上显示？{{airline.name |length > 15 ? airline.name|slice(0, 15) ~ '...' :airline.name }}

Answer 1

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

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

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

.element {

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}

@media (min-width: 768px) {

    .element {

        overflow: visible;

        white-space: normal;

        text-overflow: none;

    }

}