diff --git a/app/assets/javascripts/discourse/components/text-overflow.js.es6 b/app/assets/javascripts/discourse/components/text-overflow.js.es6
index d5bc066fb02..90a9cc21a27 100644
--- a/app/assets/javascripts/discourse/components/text-overflow.js.es6
+++ b/app/assets/javascripts/discourse/components/text-overflow.js.es6
@@ -7,6 +7,7 @@ export default Component.extend({
       const $this = $(this.element);
 
       if ($this) {
+        $this.find("br").replaceWith(" ");
         $this.find("hr").remove();
         $this.ellipsis();
       }
diff --git a/test/javascripts/components/text-overflow-test.js.es6 b/test/javascripts/components/text-overflow-test.js.es6
new file mode 100644
index 00000000000..dac6d6352cf
--- /dev/null
+++ b/test/javascripts/components/text-overflow-test.js.es6
@@ -0,0 +1,32 @@
+import componentTest from "helpers/component-test";
+
+moduleForComponent("text-overflow", { integration: true });
+
+componentTest("default", {
+  template: `
+    <style>
+      .overflow {
+        max-height: 40px;
+        overflow: hidden;
+        width: 500px;
+      }
+    </style>
+
+    <div>{{text-overflow class='overflow' text=text}}</div>`,
+
+  beforeEach() {
+    this.set(
+      "text",
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\nFusce convallis faucibus tortor quis vestibulum.<br>\nPhasellus pharetra dolor eget imperdiet tempor.<br>\nQuisque hendrerit magna id consectetur rutrum.<br>\nNulla vel tortor leo.<br>\nFusce ullamcorper lacus quis sodales ornare.<br>"
+    );
+  },
+
+  test(assert) {
+    assert.equal(
+      find(".overflow")
+        .text()
+        .trim(),
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\nFusce convallis faucibus tortor quis vestibulum. Phasellus pharetra dolor eget imperdiet..."
+    );
+  }
+});