Textpattern CMS

#1 2015-04-21 08:31:01

RedFox

Member

From: Netherlands

Registered: 2005-03-25

Posts: 809

Website

CSS: what to do with very long @-addresses on small devices?

For now I’m using overflow: hidden … cutting of some of the address … it’s absolutly not user friendly, I know.

What are you doing in these cases?

Yes, I can use word-wrap:break-word … it’s functional … but is it nice?

Last edited by RedFox (2015-04-21 09:00:04)

#2 2015-04-21 10:57:04

trenc

Plugin Author

From: ⛵️, currently Göteborg, SE

Registered: 2008-02-27

Posts: 574

Website GitHub

Re: CSS: what to do with very long @-addresses on small devices?

You can cut it and show an ellipsis as trailing.

.mail-address {
	width: 100px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis }

See JSfiddle

Last edited by trenc (2015-04-21 11:03:54)

---

Digital nomad, sailing the world on a sailboat: 32fthome.com