css+html 关于文本的总结(整理中)
布局1:固定行数
<div>
<p>示例文字示例文字示例文字示例文字</p>
</div>
<!-- CSS代码 -->
div {
width:100px;
overflow:hidden;
}
p {
overflow:hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这是控制行数,此行代码必须搭配上面两行代码才起作用 */
}
-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:
display: -webkit-box;
必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient
必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
样式1:文字超出范围显示方式
text-overflow:
值:1. clip 修剪文本
2. ellipsis 显示省略符号来代表被修剪的文本
3. string 使用给定的字符串来代表被修剪的文本。
样式2:文本换行
- <br/> html代码强制换行
- <p></p> 直接分段换行
- 这种方式的缺点是p标签会有margin和padding
- 给父级设置宽度,自动换行
- 这种方式对连续的数字和英文单词不起作用了
css中的换行方式
word-break: normal|break-all|keep-all; word-break 属性规定自动换行的处理方法。 如果该行末端有个英文单词很长它会把单词截断
-
值 描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。
-
word-wrap: normal|break-word; word-wrap 属性允许长单词或 URL 地址换行到下一行。区别就是它会把末尾的长单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。
-
值 描述 normal 只在允许的断字点换行(浏览器保持默认处理)。 break-word 在长单词或 URL 地址内部进行换行。
-
样式3:文本不换行
- white-space :nowrap; 文本不会换行,直到遇到<br/>
css+html 关于文本的总结(整理中)的更多相关文章
- css制作环形文本
css制作环形文本 在项目开发中,我们可能会遇到环形文本的需求,这个时候,怎样在代码以通俗易懂的前提下实现我们需要的效果呢?可能你会想到用一个一个的span元素计算出旋转的角度然后拼接起来,这个方案不 ...
- CSS样式大全(网络收集整理)
CSS样式大全(网络收集整理 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...
- HTML: css 修飾文本和字體
因爲這個我認爲不用記,所以關於css 修飾文本&字體的屬性只需要打開css手冊,找到(屬性 > 文本) & (屬性 > 字體)翻看即可. 關於字體屬性: Propertie ...
- CSS控制长文本内容显示(截取的地方用省略号代替)
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...
- CSS发光边框文本框效果
7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...
- 哪些CSS是可以被继承的--简单整理
那些CSS是可以被继承的--简单整理1.文本相关属性是继承的:font-size,font-family,line-height,text-index等2.列表相关属性是继承的:list-style- ...
- 【CSS学习】--- 文本样式
一.前言 CSS文本属性可以定义文本的外观.通过文本属性,可以定义文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. CSS常用的文本属性目录: text-align 文本对齐属性 te ...
- css之为文本添加线性渐变和外描边
css之为文本添加线性渐变和外描边 一.效果: 描边:描边+渐变: 二.描边: api:text-stroke 问题:text-stroke的描边是居中描边,无法直接设置外描边 解决:在before ...
- CSS: CSS常用的文本样式属性
介绍:CSS常用的文本样式属性 color: 颜色 font-size: 字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...
- CSS Text(文本)
CSS Text(文本) 一.文本颜色 color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0 ...
随机推荐
- informatica通用命令方式启动workflow
#传mapping参数时#调用执行workflow,-sv informatica服务,-d 域 -u 用户,-p 密码 -folder知识库下的workflow所在文件夹,-wait wf_test ...
- ServiceManager: Permmission failure: android.permission.RECORD_AUDIO
今天在Android6.0系统的手机上测试一款APP,出现如题错误: ServiceManager: Permmission failure: android.permission.RECORD_AU ...
- loadrunner-27796错误寻求解决办法
Action.c(58): Error -27796: Failed to connect to server "www.baidu.com:80": [10048] Addres ...
- springmvc之默认错误页面跳转
在做一个项目的时候,为了界面美观及用户体验,我们往往会设计自己的错误跳转页面,而不是直接展示给用户一堆错误码,为此我们需要配置自己的错误跳转页面. 1.项目结构 2.web.xml <!DOCT ...
- CentOS 6.5 zabbix 3.0.4 监控MySQL性能
安装mysql [root@test3 /]# yum -y install mysql mysql-server 初始化数据库 [root@test3 /]# /etc/init.d/mysqld ...
- scoll滚动
[前端性能]高性能滚动 scroll 及页面渲染优化 最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优 ...
- Palindrome Partitioning II Leetcode
Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...
- 剑指Offer 两个链表的第一个公共结点
题目描述 输入两个链表,找出它们的第一个公共结点. 思路: 题目说的很笼统,应该是有2个链表,找出公共点,第一个公共点后面的链表是共同所有的.可以用map做,直接检测map里有没有出现这个节点. ...
- Qt5 托盘模仿qq闪烁,弹消息框实现
在别人代码基础上做的,课设刚好用上了,贴出来分享Qt5.5.1实现. 图片自己找. #ifndef DIALOG_H #define DIALOG_H #include <QDialog> ...
- Bloom Filter 概念和原理
Bloom filter 是由 Howard Bloom 在 1970 年提出的二进制向量数据结构,它具有很好的空间和时间效率,被用来检测一个元素是不是集合中的一个成员.如果检测结果为是,该元素不一定 ...