实现

.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. salesforce零基础学习（一百四十二）在Formula字段中如何通过Datetime字段显示Local Time（适配DST）

    背景: 我们需求是显示Date Time类型的Time信息,比如我们想要在report中基于Hour Of Created Date进行分组,从而想要了解到一段时间内什么时间是数据创建的高峰期,不同的 ...

  2. Redis 学习笔记之基础

    一.Redis 是什么 Redis 是一个使用 C 语言写成的,开源的.key-value 结构的.非关系型数据库.它支持存储的 value 类型相对更多,包括 String(字符串).List(列表 ...

  3. 10.3 - AM - 模拟赛 总结

    复盘 T1 很水,一道异或求和,但是某两位仁兄因没打括号而死. T2 很水,一道字符串处理,但是我和某位仁兄因没特判而死(虽然没有 hack 掉我,所以我理论上还是满分). T3 不水,看了很久,没想 ...

  4. 线上JVM性能优化详解

    概述 jvm中除了程序计数器,其他的区域都有可能会发生内存溢出 内存溢出是什么? 当程序需要申请内存的时候,由于没有足够的内存,此时就会抛出OutOfMemoryError,这就是内存溢出 内存溢出和 ...

  5. weixueyuan-Nginx Web服务4

    https://www.weixueyuan.net/nginx/web/ Nginx静态资源服务器搭建 HTML 是一种标记语言,提供 HTML 文件读取是静态服务器最基本的功能,静态服务器的配置样 ...

  6. docker网络配置：bridge模式、host模式、container模式、none模式

    在docker平台里有四种网络模式,今天继续分享一下它们的常用知识,进一步加深对docker技术的理解. 1.docker网络模式分类 docker run创建Docker容器时,可以用--net选项 ...

  7. 一些devops、软件工程的个人感悟

    1.devops不是简单的工具,是思想. (1)devops核心在于快速编译构建.自动测试化.自动部署发布 (2)工具只是辅助手段,无论是Jenkins.腾讯蓝盾等等,甚至是手动bat+bash搭建, ...

  8. 重试机制与 CompletableFuture 拓展

    重试机制与 CompletableFuture 拓展 禁止转载. 本文旨在讨论重试机制的特点和策略,分析常用重试类库的实现,讨论为 CompletableFuture 添加重试机制的方法.文章首发同名 ...

  9. 2024年度Graph+AI开源探索思考

    前记 这篇年度总结其实酝酿了许久,却因诸多原因拖至腊月底,此时赶在春节前发出来,也不失为"农历版"年度总结了.所谓年度总结,一般是"温故而知新",我不太想落入堆 ...

  10. SOUI4.0发布

    4.0在3.x基础上将核心对象全部COM接口化,支持C语言调用SOUI. GIT仓库: gitee: https://gitee.com/setoutsoft/soui4 github: https: ...