文章專區

網頁設計相關文章

用CSS讓過長文字自動以「…」呈現

 在網頁設計上,為了讓版面更整齊,時常需要讓文字限制在固定尺寸的區塊內,

當文字超過設定的框架時會自動顯示「…」的刪節號。而使用CSS便可以達到這個效果。

方法便是在文字區塊內加上text-overflow: ellipsis; 、white-space: nowrap; 及 overflow:hidden;
 
如下範例:

 
然而可以發現的是,如此一來僅能顯示單行文字,若是需要顯示多行文字的話便不實用了。
不過CSS還有另一項新的屬性:-webkit-line-clamp,不僅可顯示多行文字,還可以控制要顯示的行數,超出的部分一樣會顯示「…」的符號。用法為設定要顯示的行數,例如要顯示三行便設定-webkit-line-clamp: 3
 
要配合的屬性包含:
display: -webkit-box;以及 -webkit-box-orient: vertical;  text-overflow:hidden;
 
範例:

 
 缺點是此項屬性兼容性不佳,目前僅支援有webkit的瀏覽器,如:chrome、Safari、Opera,並不支援IE和firefox。
 

 

  • 【昆明天气】最新昆明今天天气,实时提供昆明气温、空气质量、24小时天气预报、生活指数查询 2019-03-24
  • 惊险!司机驾车撞穿墙壁 “飞”下二楼 2019-03-24
  • “国际军事比赛-2018”将于7月28日起在7国举行 2019-03-23
  • 能源舆情:新增风电竞价上网 “华龙一号”完成穹顶吊装 2019-03-22
  • 水果呵护男性健康 葡萄荔枝莲子白果要多吃 2019-03-21
  • 巴常驻联合国代表:上合组织为全球提供了一个促进共赢解决方案和互利合作的重要框架 2019-03-20
  • 控制臂连接轴存隐患  保时捷召回30辆2015款918 Spyder 2019-03-20
  • 秒变迷弟!吴建豪晒与甄子丹合影:偶像给我签名 2019-03-19
  • 最高人民法院再审顾雏军案 2019-03-19
  • 贩毒者将海洛因包装成糖果快递到重庆,警方根据线报抓获2人 2019-03-18
  • 中医排毒养生八法都有哪些? 2019-03-18
  • [调皮]“谈判技巧”始终摆脱不了“被迫谈判”的尴尬! 2019-03-17
  • 2018年5月30日国台办新闻发布会 2019-03-17
  • 广州记忆丨无龙舟不端午!没有强劲臂弯的龙船发烧友不是好的传承人 2019-03-16
  • 北京进入旅游旺季 警察提示游客需防揽客者连环设套忽悠购物 2019-03-15
  • 47| 543| 839| 877| 168| 42| 853| 933| 32| 750|