HTML/CSS \\”响应式截断\\” | 珊瑚贝

HTML/CSS “Responsive Truncation”


我最近发布了我的网站的响应式版本,但是我发现包含许多单行文本的百分比宽度分割看起来非常糟糕,因为在桌面和移动视图结果中将所有内容都放在一行上在每一行文本中要么太长要么太短。

我的标记是一个无序列的链接列表(带有长锚文本) – 有没有人有任何建议根据包含分区的宽度截断锚文本?


我可以想出两个选择:

一种方法是使用 javascript 自己完成,如下所述:

用 JavaScript 计算文本宽度

在浏览器实际呈现文本之前,我认为没有任何方法可以确定文本的宽度。

确保您不显示:none,否则浏览器不会实际呈现它并且您无法确定宽度。

二是让CSS为你做;它更容易,但你几乎失去了所有的灵活性:

如果你愿意让 CSS 猜测如何将你的文本截成省略号,你可以试试 text-overflow: ellipsis

http://www.quirksmode.org/css/textoverflow.html


来源:https://www.codenong.com/8374182/

微信公众号
手机浏览(小程序)

Warning: get_headers(): SSL operation failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:ssl3_get_server_certificate:certificate verify failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(): Failed to enable crypto in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(https://static.shanhubei.com/qrcode/qrcode_viewid_10203.jpg): failed to open stream: operation failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57
0
分享到:
没有账号? 忘记密码?