diff --git a/site/src/component/SearchPopup/SearchPopup.scss b/site/src/component/SearchPopup/SearchPopup.scss
index 148a8033..82027a52 100644
--- a/site/src/component/SearchPopup/SearchPopup.scss
+++ b/site/src/component/SearchPopup/SearchPopup.scss
@@ -110,6 +110,22 @@
     color: var(--peterportal-mid-gray);
   }
 }
+.search-popup-professor-name {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.search-popup-professor-name > span {
+  display: inline-block;
+  margin-right: 0.3em;
+}
+
+.search-popup-professor-name > span.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
 
 @media only screen and (max-width: 1300px) {
   .search-popup-infos {
diff --git a/site/src/component/SearchPopup/SearchPopup.tsx b/site/src/component/SearchPopup/SearchPopup.tsx
index c6e241b0..9bda698d 100644
--- a/site/src/component/SearchPopup/SearchPopup.tsx
+++ b/site/src/component/SearchPopup/SearchPopup.tsx
@@ -117,8 +117,17 @@ const SearchPopupContent: FC<SearchPopupProps> = (props) => {
                       </span>
                       <span className="search-popup-carousel-max-score">/ 5.0</span>
                     </div>
-                    <Link to={`/${props.searchType == 'course' ? 'professor' : 'course'}/${score.id}`}>
-                      {score.name}
+                    <Link to={`/${props.searchType === 'course' ? 'professor' : 'course'}/${score.id}`}>
+                      <span className="search-popup-professor-name" title={score.name}>
+                        {score.name.split(' ').map((part, idx) => {
+                          const isTooLong = part.length > 13;
+                          return (
+                            <span key={idx} className={isTooLong ? 'ellipsis' : ''}>
+                              {part}
+                            </span>
+                          );
+                        })}
+                      </span>
                     </Link>
                   </div>
                 ))}