diff --git a/frontend/ui/widget/spinwidget.lua b/frontend/ui/widget/spinwidget.lua
index 5e0fac99c..2f9ed293d 100644
--- a/frontend/ui/widget/spinwidget.lua
+++ b/frontend/ui/widget/spinwidget.lua
@@ -10,8 +10,9 @@ local Font = require("ui/font")
 local HorizontalGroup = require("ui/widget/horizontalgroup")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local LineWidget = require("ui/widget/linewidget")
-local OverlapGroup = require("ui/widget/overlapgroup")
 local NumberPickerWidget = require("ui/widget/numberpickerwidget")
+local OverlapGroup = require("ui/widget/overlapgroup")
+local RenderText = require("ui/rendertext")
 local Size = require("ui/size")
 local TextBoxWidget = require("ui/widget/textboxwidget")
 local TextWidget = require("ui/widget/textwidget")
@@ -83,12 +84,23 @@ function SpinWidget:update()
         value_widget,
     }
 
+    local close_button = CloseButton:new{ window = self, padding_top = Size.margin.title, }
+    local btn_width = close_button:getSize().w + Size.padding.default * 2
+    local title_txt_width = RenderText:sizeUtf8Text(
+        0, self.width, self.title_face, self.title_text).x
+    local show_title_txt
+    if self.width < (title_txt_width + btn_width) then
+        show_title_txt = RenderText:truncateTextByWidth(
+            self.title_text, self.title_face, self.width - btn_width)
+    else
+        show_title_txt = self.title_text
+    end
     local value_title = FrameContainer:new{
         padding = Size.padding.default,
         margin = Size.margin.title,
         bordersize = 0,
         TextWidget:new{
-            text = self.title_text,
+            text = show_title_txt,
             face = self.title_face,
             bold = true,
             width = self.width,
@@ -106,7 +118,7 @@ function SpinWidget:update()
             h = value_title:getSize().h
         },
         value_title,
-        CloseButton:new{ window = self, padding_top = Size.margin.title, },
+        close_button,
     }
     local buttons = {
         {