[转载]使用 CSS 处理文本过长和意外超出的方法和技巧
来源:互联网 发布:淘宝客服主管工资 编辑:程序博客网 时间:2024/05/19 04:27
原文链接:http://svgtrick.com/tricks/06af9fabf7e2ecfad24856416b024968
使用 CSS 处理文本过长和意外超出的方法和技巧 —— 由聆木听风分享
在网页开发中,经常会碰到在一些场景中文本内容不受控制过长超出的问题,为了不破坏UI界面保持设计上的美观,我们需要对它进行一些截断或者是其它的处理。这篇文章就文本超出这类型的情形的方法做了一些总结,下面就来看看,针对不同的场景我们有哪些方法呢?
按钮图文混排问题
上图是一个有图标的按钮。图标是在按钮的右侧,这里又一个小小的问题,就是当按钮的长度不够长的时候,按钮中文字会叠在图标上,尤其是按钮中的文本过长的时候。
一种解决方法是给按钮设置足够大的padding-right值:
.button { padding-right: 50px;}
如下图所示:
占位文本
通常的解决方法是把文字放在按钮的下面:
人名过长
如上图所示,在web开发中经常会碰到此类人名过长的问题。当人名过长的时候,会破坏整个UI界面的视觉体验。
对这种左图右文的布局,一般的做法是图片使用浮动进行向左浮动,这样文字就会在图片的右边。当然,这仅仅是在文字不够长的情形下有效。
为了这种布局更加的健壮,可以给这两个元素添加一个宽度。当然,现在有更好的方法,那就是使用flexbox的这个属性来进行布局。
英文单词过长
在文本内容中经常会碰到一些单词过长的问题。在大尺寸设备上没啥问题,但是在小尺寸设备上,过长的单词会破坏整个页面的美感。
有两种解决方案:
使用CSS中word-break
.article-body p { word-break: break-all;}
通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。
使用text-overflow
使用text-overflow来截断文字。这个方法用在链接类型的文字上比较好,对于普通的文本推荐使用word-break。
阅读更多链接文本
上图也是一种很常见的情形,特被是文字信息用的很多。一般是阅读详细信息的链接文本在右边,这种布局的方法很多,比如绝对定位或者是浮动。
这里有一个问题是,当标题文本过长的时候,标题会叠在链接上,影响整个的视觉体验。这里推荐使用flexbox来进行布局。这样当标题文本过长的没有足够的空间放下链接的时候,链接会自动换行。
.header-2 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
可以去这篇文章详细了解下它的用法。
- [转载]使用 CSS 处理文本过长和意外超出的方法和技巧
- CSS处理文本内容过长
- 处理文字过长显示超出解决方案(纯css解决)
- TextView文本过长时用省略号表示的处理方法
- 前端页面使用CSS方法处理字符串过长的问题最简便
- 建议145:避免过长的方法和过长的类
- 未捕获和意外的异常处理
- 新闻标题超出一定长度显示"..."的CSS处理方法
- 新闻标题超出一定长度显示"..."的CSS处理方法
- 一个简单的方法解决js和css加载时间过长
- CSS-超出部分的处理
- 使用CSS截断过长标题文字的方法
- css 控制文本超出范围的省略号
- CSS超出部分显示省略号的方法(单行和多行)
- 创建CSS和处理的一些方法
- CSS隐藏文本和省略处理
- CSS文本超出
- css文本超出显示..
- android 获取http请求json数据 package com.my.gethttpjsondata; import java.io.BufferedReader; import java.
- leetcode Letter Combinations of a Phone Number(Java)
- Android:XML解析
- 【最短路中求至少需要的最短跳跃距离】poj 2253 Frogger
- 经验模态分解法简析(转)
- [转载]使用 CSS 处理文本过长和意外超出的方法和技巧
- 增强for
- 点击两次返回键退出应用
- iOS 底层解析weak的实现原理(包含weak对象的初始化,引用,释放的分析)
- 网络中出现TCP、UDP粘包、分包的两点解决办法
- Centos6搭建zabbix2.4
- IP、TCP和DNS与HTTP的密切关系
- iOS清除缓存
- JAVA 字符串替换