diff --git a/components/item.js b/components/item.js index 36e90519..58b6dd0d 100644 --- a/components/item.js +++ b/components/item.js @@ -3,7 +3,7 @@ import styles from './item.module.css' import { timeSince } from '../lib/time' import UpVote from './upvote' import { useMe } from './me' -import { useState } from 'react' +import { useEffect, useRef, useState } from 'react' import Countdown from './countdown' import { NOFOLLOW_LIMIT } from '../lib/constants' @@ -13,6 +13,15 @@ export default function Item ({ item, rank, children }) { const editThreshold = new Date(item.createdAt).getTime() + 10 * 60000 const [canEdit, setCanEdit] = useState(mine && (Date.now() < editThreshold)) + const [wrap, setWrap] = useState(false) + const titleRef = useRef() + + useEffect(() => { + setWrap( + parseInt(window.getComputedStyle(titleRef.current).lineHeight) < + titleRef.current.clientHeight) + }, []) + return ( <> {rank @@ -24,13 +33,13 @@ export default function Item ({ item, rank, children }) {
-
+
- {item.title} + {item.title} {item.url && = NOFOLLOW_LIMIT ? null : 'nofollow'} > {item.url.replace(/(^https?:|^)\/\//, '')} diff --git a/components/item.module.css b/components/item.module.css index f35a702d..188aef5e 100644 --- a/components/item.module.css +++ b/components/item.module.css @@ -16,6 +16,12 @@ flex: 1 0 128px; } +.linkSmall { + width: 128px; + display: inline-block; + vertical-align: text-top; +} + a.link:visited { color: #7acaf5; }