无涯教程网

Css 截断风景中的柔子或强制在其自己的线上，如果是肖像

发布于10月19日

我正在使用css(为了简洁，在这里通过TailWind)在纵向模式下强制FLEX子对象在自己的线上，方法是使FLEX容器flex-wrap，并将子对象的order更改为LAST，将WIDTH更改为FULL，这样它就必须在自己的线上.

<div class="flex gap-2 flex-wrap [&_*]:border-b [&_*]:px-2">
  <div>fixed</div>
  <div class="truncate order-last w-full landscape:order-[unset] landscape:w-[unset]">variable</div>
  <div class="flex-1 text-center">stretch</div>
  <div>fixed</div>
</div>

这个可以很好地工作.

肖像:

景观:

当truncate个子元素拥有本应被删减的内容时，它就会崩溃，但实际上却因为flex-wrap而将其他子元素推到了一个新的线上.在肖像上工作，但在风景中，truncate个子元素只是继续前进，把sibling 姐妹推到边缘.

肖像:

景观:

这是预期的结果:

肖像:

景观:

我有什么css选项来控制flex-wrap和text-overflow: ellipsis加入的顺序，以使truncate个子元素中的文本省略，而不是将其sibling 元素推到下一行？

Tailwind Play个

推荐答案

添加以下截断样式可以解决问题

.truncate {
    flex-basis: 10px;
    flex-grow: 1;
}

我不知道tailwind ，所以我只能用简单的css给你解决方案.

Css相关问答推荐

如何获得特定位置的Divs以根据浏览器宽度正确调整大小

当滚动到页脚时，是否可以隐藏固定元素？

在react native中应用阴影

Css-如何隐藏WP管理菜单上没有css类的第4<；li&>

使用间距时奇怪的MUI网格行为

使用最小高度和边框使阴影DOM中的元素达到自定义元素高度的100%，如果溢出，还可以zoom 父元素

关闭Superset中的Deck.gl工具提示

如何解决 Spotify 嵌入代码中的白色背景错误？

如何使用 Tailwind CSS 稳定 React 中的浮动标签？

如何阻止 Mud Blazor MudTable 列扩展以适合文本

在不使用 position： fixed 的情况下从 CSS 网格中的自动布局中免除子元素？

在 SVG 元素上方添加标签而不移动 SVG 元素

如何为柔和的配色方案提供易于使用的高对比度替代方案？

如何使用 TailwindCSS 禁用环形阴影？

ID 在整个页面中必须是唯一的吗？

如何更改 CSS：JavaScript 中的根 colored颜色变量

iPhone X / 8 / 8 Plus CSS 媒体查询

Highcharts 图表选项 backgroundColor：'transparent' 在 IE 8 上显示黑色

有没有办法让字段集的宽度与它们中的控件一样宽？

height： 100% 或 min-height： 100% 用于 html 和 body 元素？

实用课程推荐

相关教程推荐