实现

.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. w3cschool-Hibernate 教程

    什么是 ORM? ORM 表示 Object-Relational Mapping (ORM),是一个方便在关系数据库和类似于 Java, C# 等面向对象的编程语言中转换数据的技术.一个 ORM 系 ...

  2. bat脚本判断windows服务，判断windows进程

    bat脚本判断windows服务是否存在,方式一: sc query|findstr /i "ZhuDongFangYu" &&echo "存在" ...

  3. 头文件中 ifndef/define/endif 有什么用?

    1. 相同的声明可以多次出现,重复声明不是错误! 定义不可以,无论是单个文件还是多个文件,某个特定作用域(比如全局变量),不可以重复定义变量. 2. 类/结构体的定义可以在多个文件中多次出现,但是不可 ...

  4. 多方安全计算(4)：MPC万能积木-秘密共享

    学习&转载文章:多方安全计算(4):MPC万能积木-秘密共享 前言 在之前的文章(多方安全计算(3)MPC万能钥匙:混淆电路中,我们对MPC中一类通用方案混淆电路(GC)与密文比较策略做了介绍 ...

  5. 记录在本地电脑部署自己的DeepSeek 大模型AI

    大家新年好呀,年初二给各位拜年啦,祝各位新年身体健康,工作顺利,万事如意,开心快乐每一天! 前言: 这几天看到很多DeepSeek的热点新闻(火的不行呀),去了解下这个AI,然后自己试了下本地部署,发 ...

  6. 如何在M芯片的Mac上爽玩原神

    [热点速递]苹果震撼发布全新M4 Mac mini,国补福利下惊喜价仅约3500元!这不仅是一次办公体验的全新升级,更是对高效能与性价比完美融合的一次致敬.想象一下,以如此亲民的价格,拥抱苹果标志性的 ...

  7. 自适应 Simpson 积分法学习笔记

    自适应 Simpson 积分法,是一种计算一段区间内,形态奇怪的函数和的算法,例如面积并和难以直接用通项公式计算的函数. Simpson 积分 我们都知道,求解微积分需要求解一个导数的原函数,但这显然 ...

  8. ffmpeg-5.0-essentials_build 下载

    ffmpeg-5.0-essentials_build下载放到蓝奏里了 https://wwz.lanzoub.com/if9xq02pttkb密码:ee8i

  9. PIP 换源：提升 Python 包安装速度的秘诀

    一.引言 在使用 Python 进行开发时,我们经常需要通过 pip 命令安装各种库和依赖.然而,默认的源可能会因为网络原因导致下载速度缓慢,影响开发效率.这时候,换源就成为了一个非常实用的技巧. 二 ...

  10. Processing中获取表格数据( .tsv\.csv )的经验分享

    在日常收集数据的需求中,会有很多场合用到表格数据类型,如.tsv和.csv,一来高效查看和编辑,二来数据条理清晰,导入数据结构方便.在Prcocessing中帮我预留好了loadTable().loa ...