实现

.text {

    white-space:nowrap;  /*文本不换行*/

    overflow: hidden; /*超出文本隐藏*/

    text-overflow:ellipsis; /*超出文本替换 clip不显示 ellipsis省略号 指定string"..."->chrome不支持*/ 

}

测试

<!DOCTYPE html>

<html>

<head>

     <meta charset="utf-8"> 

    <title>css 单行显示 text  适应browser size</title>

    <link rel="stylesheet" type="text/css" href="../css/style.css">

</head>

<body>

    <div class="text">12345678 12345678 12345678</div>

    <p class="text">一二三四五六七八 一二三四五六七八</p>

</body>

</html>

效果图

CSS实现单行显示文本并适应浏览器大小的更多相关文章

  1. CSS实现背景图尺寸不随浏览器大小而变化的两种方法

    一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看   一些网站的首页 ...

  2. css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进

    一.文本单行显示溢出时出现省略号 二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 text-indent: 2em; 四. ...

  3. css实现单行、多行文本溢出显示省略号(…)

    一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:elli ...

  4. CSS实现单行或者多行文本溢出隐藏并且显示省略号

    一.单行超出显示省略号如果文字超出父元素指定宽度,文字会自动换行,而连续不间断数字和英文字母(没有其他字符)不会自动换行: 详细步骤: 第一步(不换行):white-space:nowrop;(对于连 ...

  5. css文字单行/多行超出显示省略号...

    css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...

  6. CSS学习笔记：文本换行显示（word-wrap）

    在CSS3中新定义了文本换行属性,word-wrap: nomal属性值表示控制连续文本换行. break-word属性值表示内容将在边界内换行.如果需要,词内换行(word-break)也会发生. ...

  7. CSS实现单行、多行文本溢出显示省略号

    单行显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap;多行显示省略号 display: -webkit-box; ...

  8. CSS盒模型和文本溢出

    CSS盒模型和文本溢出 学习目标 认识盒子模型 盒子模型的组成部分 学习盒子模型的相关元素margin padding 文本溢出相关的属性 一.认识盒子模型 盒模型是css布局的基石,它规定了网页元素 ...

  9. 4、css盒模型和文本溢出

    4:css盒模型和文本溢出 学习目标 1.认识盒子模型 2.盒子模型的组成部分 3.学习盒子模型的相关元素 margin padding 4.文本溢出相关的属性 一.css属性和属性值的定义 盒模型是 ...

  10. 用css截取字符 css排版隐藏溢出文本

    方法一: <div style="width:300px; overflow:hidden;  text-overflow:ellipsis; white-space:nowrap;& ...

随机推荐

  1. 《深入理解Mybatis原理》Mybatis中的缓存实现原理

    一级缓存实现 什么是一级缓存? 为什么使用一级缓存? 每当我们使用MyBatis开启一次和数据库的会话,MyBatis会创建出一个SqlSession对象表示一次数据库会话. 在对数据库的一次会话中, ...

  2. RESTful 架构详解-copy

    1. 什么是REST REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次出现在2000年Roy Fielding的 ...

  3. JAVA多线程和并发性知识点总结

    一. 什么是进程.线程?线程和进程的区别?1. 进程当一个程序进入内存运行时,即变成一个进程.进程是处于运行过程中的程序.进程是操作系统进行资源分配和调度的一个独立单位.进程的三个特征: 独立性独立存 ...

  4. 0101-win10 jkd配置注意事项

    更换新的电脑预装win10家庭版,根据常规方法配置jdk8后运行javac提示:不是内部或外部命令,也不是可运行的程序或批处理文件. 1 设置变量classpath时前面有个点(完成这一步后javac ...

  5. angularjs和ajax的结合使用 （四）

    知道的朋友了解 我不是属于讲按部就班技术的那种人.什么xx入门 ,入门到精通,入门到入土. 其实非要严格说的话已经跟angularjs 什么ajax 偏的有点远了,之所以还是叫这个名称,因为都属于we ...

  6. 玩转云端 | 真实模拟，即压即测，天翼云息壤性能测试PTS实践大揭秘！

    满城春色惹人醉,恰是出游好时节. 伴随春暖花开,我国旅游市场快速升温,越来越多的人开始走出家门,去追寻久违的诗和远方.根据文化和旅游部数据中心近日测算,预计2023年,我国国内旅游人数约为45.5亿人 ...

  7. MTV和MVC模式，初识模板

    MTV和MVC模式,初识模板1.MTV和MVC模式:分层级进行管理 说到框架模式我们有必要简单的说下设计模式,了解下设计模式这个概念,因为有人对设计模式和框架模式的概念经常混淆 设计模式: 是一套被反 ...

  8. 深入剖析Vue框架：从基础到未来趋势

    深入剖析Vue框架:从基础到未来趋势 Vue 框架简介 Vue.js 是一款用于构建用户界面的 JavaScript 框架 ,它基于标准 HTML.CSS 和 JavaScript 构建,并提供了一套 ...

  9. linux ubuntu更改软件源

    更换步骤 sudo cp /etc/apt/sources.list /etc/apt/sources.list.back sudo vim /etc/apt/sources.list 替换为下面内容 ...

  10. Luogu P9055 [集训队互测 2021] 数列重排 题解 [ 紫 ] [ 构造 ] [ 数学 ]

    数列重排:差点就场切的神仙构造,最后一步想假了,导致我模拟赛荣获 25+5+0 的好成绩! 这题部分分很有启发性,跟着一步一步打基本能想到正解的构造,但也有可能想偏部分分的意思,想假策略. 构造 先看 ...