文字/文本超出显示省略号

文字或文本超出显示省略号

1. 超出一行隐藏：

第一步：给文本设置固定宽度
第二步：给文本设置以下属性

<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}ul>li span {display: block;}li{list-style: none;border: 1px solid #00FFFF;width: 100px;}</style></head><body><div class="container" style="background-color: #d6ebde;width: 500px;margin: auto;height: 300px;"><ul style="display: flex;justify-content: space-between;"><Li><img src="img/code.png"/><span>标题</span><span>这是第一行的内容，但是太多了我想隐藏掉</span></Li><Li><img src="img/code.png"/><span>标题</span><span>内容内容内容内容内容内容</span></Li><Li><img src="img/code.png"/><span>标题</span><span>内容内容内容内容内容内容</span></Li><Li><img src="img/code.png"/><span>标题</span><span>内容内容内容内容内容内容</span></Li><Li><img src="img/code.png"/><span>标题</span><span>内容内容内容内容内容内容</span></Li></ul></div></body>
</html>

显示效果：

更改代码：添加

  1.设置固定宽度2.设置以下属性overflow: hidden;//超出文本隐藏
text-overflow: ellipsis;//溢出用省略号显示
white-space: nowrap;//溢出不换行

<html><head><meta charset="utf-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}ul>li span {display: block;}li {list-style: none;border: 1px solid #00FFFF;width: 100px;}</style></head><body><div class="container" style="background-color: #d6ebde;width: 500px;margin: auto;height: 300px;"><ul style="display: flex;justify-content: space-between;"><Li><img src="img/code.png" /><span>标题</span><span style="width: 50px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;background: yellow;">这是第一行的内容，但是太多了我想隐藏掉</span></Li><Li><img src="img/code.png" /><span>标题</span><span>内容内容内容内容内容内容</span></Li><Li><img src="img/code.png" /><span>标题</span><span>内容内容内容内容内容内容</span></Li><Li><img src="img/code.png" /><span>标题</span><span>内容内容内容内容内容内容</span></Li><Li><img src="img/code.png" /><span>标题</span><span>内容内容内容内容内容内容</span></Li></ul></div></body>
</html>

显示效果：

2. 超出两行隐藏：
【有时候一行不是很好看，尤其是内容，可能标题需要一行超出隐藏，但是内容两行会好看一点，话不多说，上代码】
超出两行隐藏：

注意：-webkit是谷歌内核专用哈，其他浏览器不可

   1.overflow: hidden;//超出文本隐藏
text-overflow: ellipsis;//溢出用省略号显示2.display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。

<html><head><meta charset="utf-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}ul>li span {display: block;}li {list-style: none;border: 1px solid #00FFFF;width: 100px;}</style></head><body><div class="container" style="background-color: #d6ebde;width: 500px;margin: auto;height: 300px;"><ul style="display: flex;justify-content: space-between;"><Li><img src="img/code.png" /><span>标题</span><span style="width: 50px;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;background: yellow;-webkit-line-clamp: 2;display: -webkit-box;
}">这是第一行的内容，但是太多了我想隐藏掉</span></Li><Li><img src="img/code.png" /><span>标题</span><span>内容内容内容内容内容内容</span></Li><Li><img src="img/code.png" /><span>标题</span><span>内容内容内容内容内容内容</span></Li><Li><img src="img/code.png" /><span>标题</span><span>内容内容内容内容内容内容</span></Li><Li><img src="img/code.png" /><span>标题</span><span>内容内容内容内容内容内容</span></Li></ul></div></body>
</html>

显示效果：

文字/文本超出显示省略号相关推荐

文本超出显示省略号的方法
1.一行文本超出显示省略号的方法:text-overflow和white-space超出隐藏显示省略号设计css样式时,遇到要使文本在一行内显示,超出则加省略号的问题解决办法: 只需要使用text- ...
CSS文本超出显示省略号
CSS文本超出显示省略号 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法...
文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行折 ...
实现文本超出显示省略号
关键词 :文本超出显示省略号以前一直以为只能实现一行文本超出才能显示省略号,今天才发现是我见识太浅薄了! 1.限制文本为一行超出显示点点点 height: 30px; overflow: hidd ...
css 文本超出显示省略号不起作用
一.单行文本显示省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 二.多行文本显示省略号 overflow : h ...
禁止选择文字和文本超出显示省略号
禁止选中文字用来防止用户选中页面上的文字的css样式 uesr-select:none; -webkit-user-select:none -moz-uesr-select:none; -ms-ue ...
css实现文字超出显示省略号...
01.块状元素单行文本超出显示省略号: ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ove ...
Vue文本内容超出显示省略号，超出显示tooltip提示
项目中固定宽度的容器文本超出显示省略号,超出部分显示tooltip场景很常见,所以自己就着手写了一个过滤器用于判断文本是否超出. 代码中有用到Element-UI的组件,还有会提示在Table组件中和 ...
文字超出显示省略号解决方案
文字单行超出显示省略号 div {width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; } 文字多行超出 ...

文字/文本超出显示省略号

文字或文本超出显示省略号

文字/文本超出显示省略号相关推荐

最新文章

热门文章