• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 强制文本在一行内显示,并且后面有省略号效果的实现方法

强制文本在一行内显示,并且后面有省略号效果的实现方法

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含文本,一行,显示,省略号等相关知识,佚名 希望在学习及工作中可以帮助到您

设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。 对应的脚本特性为textOverflow。

<div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; ">a b c d e f g h i j k l , msa sd sd sa w df f </div>

text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。

一、仅定义text-overflow:ellipsis; 不能实现省略号效果。  

二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果。  

三、同时应用:text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可实现所想要得到的溢出文本显示省略号效果。

以上这篇强制文本在一行内显示,并且后面有省略号效果的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持微课江湖。

原文地址:http://blog.csdn.net/fanhaiwang520/article/details/7990758

您可能想查找下面的文章:

  • text-algin:justify实现文本两端对齐方法小结
  • css渐变色彩 省略标记 嵌入字体 文本阴影全面了解
  • 强制文本在一行内显示,并且后面有省略号效果的实现方法
  • CSS文本和div垂直居中方法总结
  • 浅谈CSS样式之背景、文本
  • CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现
  • CSS超出文本指定宽度用省略号代替和文本不换行
  • CSS控制文本的长度 超过一行显示省略号的实现方法
  • CSS文本超出div或者span时用省略号代替
  • CSS中的文本属性学习指南

相关文章

  • 2017-08-06css控制字间距和对齐方式及其所用属性介绍
  • 2017-08-06IE下使用form时所在行被撑高的解决方法
  • 2017-08-06CSS text-shadow,box-shadow,border-radius属性
  • 2017-08-06CSS3模拟动画下拉菜单效果
  • 2017-08-06关于CSS中的display:table-cell使用技巧的几种应用
  • 2017-08-06CSS代码编写的一些性能优化技巧总结
  • 2017-08-06css的核心内容 标准流、盒子模型、浮动、定位等分析
  • 2017-08-06IE下去掉iframe边框兼容IE7\IE8\IE6以下
  • 2017-08-06css盒子模型详解加示例
  • 2017-08-06浏览器特定的CSS Hacks汇总

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS中margin边界叠加问题及解决方案
    • IE对标准的支持不够好导致CSS渲染跟其它浏览器有什么不同
    • 知识普及:彻底搞懂CSS中单位px和em,rem的区别
    • css照片有如层叠效果的实现方法
    • ie6下实现position:fixed效果实例介绍
    • line-height 和 vertical-align 行高与行对齐精解 (图文)
    • div水平垂直居中的完美解决方案
    • CSS Less框架基础教程
    • 纯CSS无hacks的跨游览器自适应高度多列布局 推荐
    • 本文的主角 vertical-align使用介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有