惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

D
DataBreaches.Net
S
Schneier on Security
T
The Exploit Database - CXSecurity.com
Webroot Blog
Webroot Blog
AI
AI
P
Palo Alto Networks Blog
Attack and Defense Labs
Attack and Defense Labs
WordPress大学
WordPress大学
月光博客
月光博客
阮一峰的网络日志
阮一峰的网络日志
Spread Privacy
Spread Privacy
T
Tor Project blog
罗磊的独立博客
小众软件
小众软件
S
Security Affairs
酷 壳 – CoolShell
酷 壳 – CoolShell
量子位
Apple Machine Learning Research
Apple Machine Learning Research
T
Threatpost
NISL@THU
NISL@THU
博客园_首页
PCI Perspectives
PCI Perspectives
大猫的无限游戏
大猫的无限游戏
IT之家
IT之家
N
News and Events Feed by Topic
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Forbes - Security
Forbes - Security
博客园 - 叶小钗
D
Darknet – Hacking Tools, Hacker News & Cyber Security
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Last Week in AI
Last Week in AI
L
LINUX DO - 热门话题
T
Threat Research - Cisco Blogs
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
腾讯CDC
Security Latest
Security Latest
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
The Cloudflare Blog
A
About on SuperTechFans
爱范儿
爱范儿
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
TaoSecurity Blog
TaoSecurity Blog
宝玉的分享
宝玉的分享
G
GRAHAM CLULEY
雷峰网
雷峰网
F
Full Disclosure
I
Intezer
Cloudbric
Cloudbric
博客园 - 三生石上(FineUI控件)
U
Unit 42

Defensive CSS

Defensive CSS - Button minimum width Defensive CSS - Input zoom on iOS Safari Defensive CSS - Default flexbox stretching Defensive CSS - Image inner border Defensive CSS - Accidental hover on mobile Defensive CSS - Vertical media queries Defensive CSS - Text over image Defensive CSS - Using space-between Defensive CSS - Scrollbars on demand Defensive CSS - Scrollbar gutter Defensive CSS - Scroll chaining Defensive CSS - Position sticky with CSS Grid Defensive CSS - Image maximum width Defensive CSS - Grouping vendor selectors Defensive CSS - Minimum Content Size In CSS grid Defensive CSS - Minimum Content Size In CSS Flexbox Defensive CSS - Fixed sizes Defensive CSS - CSS Variable Fallback Defensive CSS - CSS grid fixed values Defensive CSS - Background repeat Defensive CSS - Auto-fit Vs Auto-fill Defensive CSS - Component Spacing Defensive CSS - Image Distortion Defensive CSS - Flexbox Wrapping
Defensive CSS - Long Content
2022-04-19 · via Defensive CSS

Here is a list of people’s names and it looks perfect for now.

However, since this is user-generated content, we need to be careful about how to defense the layout in case of something too long.

In such layouts, consistency is important. To achieve that, we can simply truncate the name by using text-overflow and its friends.

In some scenarios, we might need to truncate a text that isn't important for the user, or doesn't affect the user experience. In such a case, truncating the text is a good idea.

Defensive CSS is a good way to write bullet-proof CSS!

Toggle Defensive

If you’re interested to sharpen your skills in handling long content in CSS, I wrote a detailed article on that topic.