15.9. 自适应宽度超出截取并显示省略字符

简介:


 
<style type="text/css">
.ellipsis {
    white-space: nowrap; /*保留文字间的空白*/
    width: 200px;
    overflow: hidden;  /*超出部分隐藏,*/
    text-overflow: ellipsis; /*超出部分显示成... */
    border:1px solid #333;
}
</style>

<div class="ellipsis"> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div>
  
 




原文出处:Netkiller 系列 手札
本文作者:陈景峯
转载请与作者联系,同时请务必标明文章原始出处和作者信息及本声明。

目录
相关文章
|
5月前
span标签显示固定长度显示省略号,光标放上显示全部
span标签显示固定长度显示省略号,光标放上显示全部
|
5月前
|
前端开发
文字不换行超出后左右滑动
文字不换行超出后左右滑动
31 0
文本超出显示省略号--截取字段
文本超出显示省略号--截取字段
|
10月前
|
JavaScript 前端开发
绚烂的文本换行,打破常规元素背景填充规则
在我们的日常开发中,为一个元素设置背景、边框、阴影、内外边距等,通常是会应用在整个元素上; 例如我为一个元素设置一个背景图,根据背景图的填充规则设定,这个图片可能会出现重复,或者拉伸,或者多余的地方留
76 0
绚烂的文本换行,打破常规元素背景填充规则
|
10月前
|
算法 前端开发 JavaScript
图片转ASCII字符图案的原理(可调整亮度对比度 宽高度)
平时看代码会看到很多标点符号的字符拼起来的图案, 特别有趣, 像kong(一个高性能API网关), 除了源代码里面有图案, 命令行也藏了彩蛋. 我今天要玩的会深入一点: 基于图片的灰度值来生成图案. 此时的图片不单单有轮廓, 还有光影效果, 也就是素描中提及的黑白灰.
63 0
|
前端开发 JavaScript API
固定元素宽度根据文本的长度缩小字号,超出缩小字号
固定元素宽度根据文本的长度缩小字号,超出缩小字号
330 0
固定元素宽度根据文本的长度缩小字号,超出缩小字号
|
Web App开发 存储 弹性计算
div中文字超过指定数量后不显示并且以省略号结尾
div中文字超过指定数量后不显示并且以省略号结尾
309 0
div中文字超过指定数量后不显示并且以省略号结尾
|
前端开发
解决字母或数字溢出盒子(文字超出时不自动换行)
解决字母或数字溢出盒子(文字超出时不自动换行)
301 0
解决字母或数字溢出盒子(文字超出时不自动换行)
|
JavaScript 前端开发
文本溢出显示省略号
文本溢出显示省略号
文本溢出显示省略号