如何使用 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;    }}