博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
文本相关属性
阅读量:5107 次
发布时间:2019-06-13

本文共 804 字,大约阅读时间需要 2 分钟。

1.text-overflow 属性: 当文本框无法容纳文本的长度时显示超出部分的方式设置

   clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉(默认)
   ellipsis: 当对象内文本溢出时显示省略标记(...),使用ellipsis的时候,必须同时配合overflow:hidden; white-space:nowrap;width:300px;这三个样式共同使用才会有效果
2.
white-space 属性:
   white-space:nowrap; 规定段落中的文本不会换行,文本会在同一行上继续,直到遇到 <br> 标签为止。

3.word-wrap属性:

  属性值break-word; 和break-all; 的区别如下:

  两者都能使容器内的文本内容自动换行, break-word是指若行未的英文单词或url过长,则在词内换行, break-all则是若行未的英文单词或url过长,会将该单词放到下一行,而不会把单词截断
4.text-decoration 属性

  underline 定义文本下的一条线;inherit 规定应该从父元素继承 text-decoration 属性的值 ;

应用:

1.超出单行文本显示省略号:

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

2.超出两行文本显示省略号:

     overflow:hidden;

    display:-webkit-box;

    white-space:normal;

    text-overflow:ellipsis;

   -webkit-line-clamp:2;

   -webkit-box-orient:vertical; 

 

转载于:https://www.cnblogs.com/prospective-zkq/p/9833692.html

你可能感兴趣的文章
关于TFS2010使用常见问题
查看>>
poj2752 Seek the Name, Seek the Fame
查看>>
理解oracle中连接和会话
查看>>
Zookeeper常用命令 (转)
查看>>
程序员的数学
查看>>
聚合与组合
查看>>
洛谷 P2089 烤鸡【DFS递归/10重枚举】
查看>>
我眼中的技术地图
查看>>
lc 145. Binary Tree Postorder Traversal
查看>>
android dialog使用自定义布局 设置窗体大小位置
查看>>
ionic2+ 基础
查看>>
[leetcode]Minimum Path Sum
查看>>
Aizu - 1378 Secret of Chocolate Poles (DP)
查看>>
IO流写出到本地 D盘demoIO.txt 文本中
查看>>
Screening technology proved cost effective deal
查看>>
mysql8.0.13下载与安装图文教程
查看>>
Thrift Expected protocol id ffffff82 but got 0
查看>>
【2.2】创建博客文章模型
查看>>
从零开始系列之vue全家桶(1)安装前期准备nodejs+cnpm+webpack+vue-cli+vue-router
查看>>
Jsp抓取页面内容
查看>>