diff --git a/src/components/Task.js b/src/components/Task.js
index 77af6f55..764d7f35 100644
--- a/src/components/Task.js
+++ b/src/components/Task.js
@@ -29,6 +29,7 @@ export default function Task({
           readOnly={true}
           name="title"
           placeholder="Input title"
+          style={{ textOverflow: "ellipsis" }}
         />
       </label>
 
diff --git a/src/components/Task.stories.js b/src/components/Task.stories.js
index 1fe2009f..b2818771 100644
--- a/src/components/Task.stories.js
+++ b/src/components/Task.stories.js
@@ -33,3 +33,12 @@ Archived.args = {
     state: "TASK_ARCHIVED",
   },
 };
+const longTitleString = `This task's name is absurdly large. In fact, I think if I keep going I might end up with content overflow. What will happen? The star that represents a pinned task could have text overlapping. The text could cut-off abruptly when it reaches the star. I hope not!`;
+
+export const LongTitle = Template.bind({});
+LongTitle.args = {
+  task: {
+    ...Default.args.task,
+    title: longTitleString,
+  },
+};