CSS实现单行显示文本并适应浏览器大小
实现
.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实现单行显示文本并适应浏览器大小的更多相关文章
- CSS实现背景图尺寸不随浏览器大小而变化的两种方法
一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看 一些网站的首页 ...
- css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进
一.文本单行显示溢出时出现省略号 二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 text-indent: 2em; 四. ...
- css实现单行、多行文本溢出显示省略号(…)
一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:elli ...
- CSS实现单行或者多行文本溢出隐藏并且显示省略号
一.单行超出显示省略号如果文字超出父元素指定宽度,文字会自动换行,而连续不间断数字和英文字母(没有其他字符)不会自动换行: 详细步骤: 第一步(不换行):white-space:nowrop;(对于连 ...
- css文字单行/多行超出显示省略号...
css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...
- CSS学习笔记：文本换行显示（word-wrap）
在CSS3中新定义了文本换行属性,word-wrap: nomal属性值表示控制连续文本换行. break-word属性值表示内容将在边界内换行.如果需要,词内换行(word-break)也会发生. ...
- CSS实现单行、多行文本溢出显示省略号
单行显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap;多行显示省略号 display: -webkit-box; ...
- CSS盒模型和文本溢出
CSS盒模型和文本溢出 学习目标 认识盒子模型 盒子模型的组成部分 学习盒子模型的相关元素margin padding 文本溢出相关的属性 一.认识盒子模型 盒模型是css布局的基石,它规定了网页元素 ...
- 4、css盒模型和文本溢出
4:css盒模型和文本溢出 学习目标 1.认识盒子模型 2.盒子模型的组成部分 3.学习盒子模型的相关元素 margin padding 4.文本溢出相关的属性 一.css属性和属性值的定义 盒模型是 ...
- 用css截取字符 css排版隐藏溢出文本
方法一: <div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;& ...
随机推荐
- Solution Set - 多项式杂题
0. 「OurOJ #46942」/「51nod #1824」染色游戏 Private link & Submission. 首先,显然有 \[f(t)=\sum_{i=0}^t\bi ...
- c# WPF convert photo to Sketch effects
using the online website https://imagetosketch.com/ <Window x:Class="WpfMosaic.PhotoSketchWi ...
- Netty-快速入门
---------------------------------------------------- netty是什么? Netty is an asynchronous event-driven ...
- Hutool-工具常用代码集
Hutool是一个小而全的Java工具类库,通过静态方法封装,降低相关API的学习成本,提高工作效率,使Java拥有函数式语言般的优雅,让Java语言也可以"甜甜的".Hutool ...
- 京东从 OpenStack 改用 Kubernetes 的始末
构建集群的历史 物理机器的时代(2004年-2014年) 在2014年之前,我们公司的应用程序都部署在物理机器上.在物理机器时代,为了给即将上线的应用程序分配物理机器,我们平均需要等上一周的时间.由于 ...
- BGV12
BGV12,论文:(Leveled) Fully Homomorphic Encryption without Bootstrapping 密钥交换 ️ 矩阵\(A_{N*n_2}\) 矩阵\(B_{ ...
- [BZOJ P2771] 天才ACM
[BZOJ P2771] 天才ACM 传送门 朴素算法 枚举终点 \(r\),对区间 \([l, r]\) 排序求校验值 \(sum\),比较 \(sum\) 和 \(t\) $ sum \le t ...
- C#/.NET/.NET Core技术前沿周刊 | 第 23 期（2025年1.20-1.26）
前言 C#/.NET/.NET Core技术前沿周刊,你的每周技术指南针!记录.追踪C#/.NET/.NET Core领域.生态的每周最新.最实用.最有价值的技术文章.社区动态.优质项目和学习资源等. ...
- CBAM注意力模型介绍
本文分享自天翼云开发者社区<CBAM注意力模型介绍>,作者:Liuzijia 近年来,注意力机制在各项深度学习任务中表现出色.研究表明,人类视觉感知过程中,注意力机制发挥了积极的效果,可以 ...
- jar包启停shell脚本
jar包控制脚本1 #!/bin/bash export JAVA_HOME=/u01/java_home/jdk1.8.0_181 export APP_HOME=/u01/test export ...