u

code/g3soft-libs/docs/examples/grid/no-wrap.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// wrap=false：不换行，超出部分会被挤压（配合 flex 使用）
+import { G3Col, G3Row } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Row :gutter="12" :wrap="false">
+    <G3Col :span="8"><div class="cell">span 8</div></G3Col>
+    <G3Col :span="8"><div class="cell">span 8</div></G3Col>
+    <G3Col :span="8"><div class="cell">span 8</div></G3Col>
+    <G3Col :span="8"><div class="cell">超出 24，但不换行</div></G3Col>
+  </G3Row>
+</template>
+
+<style scoped>
+.cell {
+  padding: 12px 0;
+  border-radius: 6px;
+  background: rgba(24, 24, 27, 0.04);
+  font-size: 13px;
+  text-align: center;
+  white-space: nowrap;
+}
+</style>