实现

.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. shell脚本检查192.168.1网段ip是否在用

    要检查 192.168.1 网段中哪些 IP 地址正在使用,可以使用 Shell 脚本结合 ping 命令来扫描整个网段.以下是实现这一功能的完整脚本: 脚本:检查 192.168.1 网段 IP 是 ...

  2. 深入理解 RESTful Api 架构-copy

    深入理解 RESTful Api 架构 周梦康 发表于 2016-01-03 分类于 笔记 61818 次浏览 标签 : REST   一些常见的误解 不要以为 RESTful Api  就是设计得像 ...

  3. springBoot(1)--初步理解

    在没有用SpringBoot之前,我们用spring和springMVC框架,但是你要做很多比如: (1)配置web.xml,加载spring和spring mvc 2)配置数据库连接.配置sprin ...

  4. 解析mysql奇葩语句

    首先看看完整的表如下图 那么看看一个比较奇葩的语句 select * from users where name = 'aa'='bb'这个语句为啥能执行成功以及为什么打印出了除了两个aa之外的所有行 ...

  5. react父传子(以及默认值)

    子组件 import React, { Component } from "react"; import "./base.css" // 父组件 export ...

  6. 硬件设计:POE--POE基础

    参考资料:POE供电基础知识:PSE PD检测过程详解 POE供电简介 以太网供电 一.POE相关介绍 POE(Power Over Ethernet)是指在现有的以太网Cat.5布线基础架构上不做任 ...

  7. dp 常见套路总结

    dp 里存的东西值域不大的时候,考虑把状态中某一维和 dp 里存的东西交换,进行 dp. 连续段 dp 时,考虑把连续段化为对每个元素考虑接上一个元素. dp 里的值可能存在某个上界,超过这个值一定不 ...

  8. Luogu P4425 转盘 题解 [ 黑 ] [ 线段树 ] [ 贪心 ] [ 递归 ]

    转盘:蒟蒻的第一道黑,这题是贪心和线段树递归合并的综合题. 贪心 破环成链的 trick 自然不用多说. 首先观察题目,很容易发现一个性质:只走一圈的方案一定最优.这个很容易证,因为再绕一圈回来标记前 ...

  9. deepseek-v3 论文阅读

    模型结构 MLA(Multi-Head Latent Attention) 主要作用是在保证效果的基础上, 利用低秩压缩的原理优化kvCache, 加速推理, 同时节省训练显存. 先回忆下MHA, 在 ...

  10. 大型语言模型（LLM）为什么处理日语这么“头大”？

    引言 你有没有想过,为什么 AI 大神们处理日语时,总是会挠头?其实,这都要从"token"这个神奇的小东西说起. 在大型语言模型(LLM)中,token 就是文本的基本处理单位. ...