fix(select): placeholder may overflow if it's long

CHANGELOG.en-US.md

@@ -4,12 +4,11 @@
 
 ### Fixes
 
-### Feats
-
 - `n-notification` add `keepAliveOnHover` props to control whether the notification will be closed when mouse hover, closes [#3249](https://github.com/TuSimple/naive-ui/issues/3249).
 - Fix `n-date-picker` will cancel selecting in range mode if click at disabled confirm button, closes [#3254](https://github.com/TuSimple/naive-ui/issues/3254).
 - Fix `n-button`'s `focusable` prop doesn't work, closes [#3292](https://github.com/TuSimple/naive-ui/issues/3292).
 - Fix `n-upload`'s `on-error` & `on-finish` props don't allow `() => void` type, closes [#3290](https://github.com/TuSimple/naive-ui/issues/3290).
+- Fix `n-select`'s placeholder may overflow if it's long.
 
 ### Feats
 

CHANGELOG.zh-CN.md

@@ -4,12 +4,11 @@
 
 ### Fixes
 
-### Feats
-
 - `n-notification` 新增 `keepAliveOnHover` 属性，用于设置鼠标移入时是否保持通知框显示，关闭 [#3249](https://github.com/TuSimple/naive-ui/issues/3249)
 - 修复 `n-date-picker` 在范围模式下点击禁用的确认按钮会取消选择中的状态，关闭 [#3254](https://github.com/TuSimple/naive-ui/issues/3254)
 - 修复 `n-button` 的 `focusable` 属性不生效，关闭 [#3292](https://github.com/TuSimple/naive-ui/issues/3292)
 - 修复 `n-upload` 的 `on-error` 和 `on-finish` 属性不允许 `() => void` 类型，关闭 [#3290](https://github.com/TuSimple/naive-ui/issues/3290)
+- 修复 `n-select` 的 placholder 过长时可能溢出
 
 ### Feats
 

src/_internal/selection/src/Selection.tsx

@@ -749,7 +749,9 @@ export default defineComponent({
         <div
           class={`${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`}
         >
-          {this.placeholder}
+          <div class={`${clsPrefix}-base-selection-placeholder__inner`}>
+            {this.placeholder}
+          </div>
         </div>
       ) : null
       const popoverTrigger = filterable ? (
@@ -875,7 +877,9 @@ export default defineComponent({
                 class={`${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`}
                 key="placeholder"
               >
-                {this.placeholder}
+                <div class={`${clsPrefix}-base-selection-placeholder__inner`}>
+                  {this.placeholder}
+                </div>
               </div>
             )}
             {suffix}

src/_internal/selection/src/styles/index.cssr.ts

@@ -103,7 +103,12 @@ export default c([
     ]),
     cB('base-selection-placeholder', `
       color: var(--n-placeholder-color);
-    `),
+    `, [
+      cE('inner', `
+        max-width: 100%;
+        overflow: hidden;
+      `)
+    ]),
     cB('base-selection-tags', `
       cursor: pointer;
       outline: none;