css让文字在一行内显示

1.例如 p元素，里面的文字不换行显示，超出部分不隐藏

p{width:100px;word-break:keep-all;white-space:nowrap;
}

2.例如 p元素，里面的文字不换行，超出部分用省略号代替

p{width:100px;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

说明：
word-break:keep-all; /* 不换行 / => 只能在半角空格或连字符处换行
white-space:nowrap; / 不换行 / => 规定段落中的文本不进行换行
overflow:hidden; / 内容超出宽度时隐藏超出部分的内容 /
text-overflow:ellipsis;
/ 当对象内文本溢出时显示省略标记(…) ; 需与 overflow:hidden; 一起使用 */

传送门 =>

CSS word-break 属性
CSS white-space 属性
CSS text-overflow 属性

借鉴这位大佬的：https://www.bbsmax.com/A/q4zVDDvj5K/

css让文字在一行内显示相关推荐

CSS控制字体在一行内显示不换行
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法: 一般的文字截断(适用于内联与块): 1 .text ...
html元素一行显示不完收缩_CSS white-space norma nowrap强制同一行内显示所有文本不换行...
DIV CSS white-space norma nowrap强制同一行内显示所有文本文字,让所有文字内容中一排显示不换行. 让文字不自动换行,无论CSS宽度设置多少,所有文字都在一行内显示.特别是 ...
html 字前边自动加点,css实现文字越界加点点点显示，并且后面紧跟一个图标
文字越界添加...显比抖朋要插支一圈不者地示在HTML页面上,会遇到当文字长度超出一定长度的时候,将超出的部分显示为...的情况,这个功能很好实现,很多人都可以直接写出来. 示例代码: .demo ...
html 文字中不换行怎么写,HTML让字体在一行内显示不换行
/*一般的文字截断(适用于内联与块):*/ /*@author zhenyuya */ .text-oneLine{ display:block; /*内联对象需加*/ word-break:keep ...
css实现多个div在一行内显示
为了能让多个div的内容在同一行显示,需要 1.设置每一个div的宽度,并且所有div的width加起来不能超过显示屏的宽度,否则会被迫换行: 2.每个div设置display:inline 通过设置 ...
html 输入框自动缩短一行内显示,JQuery UI组合框自动补全功能改进版（即时全部显示+input内容保存）...
JQuery UI Autocomplete(自动补全)功能在input前端设计中非常有用,最近一个项目正好用到,仔细研究了下组合框(combobox)的自动补全部分,官方地址是:https://jq ...
css实现文字过长省略显示
.simpleName {width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }<div clas ...
html字体超出后隐藏省略号,CSS控制文字超出部分省略号显示
一:单行文本显示不完时,我们只需要设置单行文本的宽度,不允许换行,溢出隐藏及换行省略四个属性即可: p{ max-width: 100px; overflow:hidden; text-overflo ...
css 两个div一行居中显示,CSS：多个DIV在同一行居中显示的一种实现方法
在项目开发中,画面经常有多个DIV的内容显示在一行的要求. 比如HTML 你好,这是div1的第一行. 你好,这是div1的第二行你好,这是div2的第一行. 你好,这是div3的第一行. 你好,这 ...

css让文字在一行内显示

css让文字在一行内显示

css让文字在一行内显示相关推荐

最新文章

热门文章