【css限制单行文本输入，超出部分使用...替换】的更多相关文章

css限制单行文本输入，超出部分使用...替换

在实际应用中,经常需要只显示一行文字,不允许文字换行破坏整体样式的情况.例如'商品的名称','简介'等等.但是由于显示器的宽度不一样,会出现后台所给文字内容,一行文本容纳不下的情况.溢出的文本如果使用overflow:hidden生硬的给隐藏掉,显示的效果不是很好,这时,溢出的文本就需要使用省略号...来替换.使用js截取有点儿复杂,可直接使用css的属性进行设置,实现该效果. 需给文本对象添加的css属性如下: <p class="className">休闲纯色百搭短裤&…

css文字单行/多行超出显示省略号...

css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设置*/ overflow: hidden; /*文本超出隐藏*/ text-overflow: ellipsis; /*文本超出显示省略号*/ white-space: nowrap; /*超出的空白区域不换行*/ } 多行超出 .twoline { width:300upx; /*宽度一定要设置*…

css 之单行文本显示省略和多行文本省略

一.单行文本显示省略号...... overflow:hidden; white-space:nowrap; text-overflow:ellipsis; <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <style type="text/css"> /* 一般要指定宽度,然后给如下四个属性. */ sp…

css控制单行文本溢出

1.溢出属性(容器的) overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit; visible:默认值,内容不会被修剪,会成现在元素框之外: hidden:内容会被修剪,并且其余内容是不可见的: scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容; auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容; inherit:规定应该从父元素继承overflow属性的值. 2.空余空间 white-space:norm…

Java Swing界面编程(18)---单行文本输入组件:JTextField

版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xuejiawei123/article/details/27565407 下面的程序与上一例有一点差别,细致对照不难发现当中的不同之处. package com.beyole.util; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JTextField; public class test17 {…

CSS实现单行文本溢出显示省略号

p { width:100px;//设定宽度 //以下三个属性设置均必不可少 white-space: nowrap; text-overflow:ellipsis; overflow:hidden; } css样式设置如上…

CSS实现单行、多行文本超出部分显示省略号

 单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; }</style> 效果如下: 多行文本超出部分显示省略号 代码如下: <style> .more{ line-height:18px; overflow: hidden; display: -webkit-box; -webkit-box-orien…

css实现单行（多行）文本溢出显示 ...

overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 当然还需要加宽度width属来兼容部分浏览. 以上为单行文本溢出=====> 以下为多行文本溢出 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 适用范围: 因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端:…

css单行文本及多行文本溢出显示省略号

关于文本溢出的相关属性: 1. text-overflow: clip|ellipsis|string;   该属性规定当文本溢出包含元素时发生的事情. clip : 修剪文本. ellipsis : 显示省略符号来代表被修剪的文本. string : 使用给定的字符串来代表被修剪的文本. 2. white-space 属性设置如何处理元素内的空白. 可能的值及含义: normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的 <pre> 标签. no…

css控制单行或者多行文本超出显示省略号

1.单行文本 使用text-overflow:ellipsis属性 text-overflow: clip|ellipsis|string; clip:修剪文本. ellipsis:显示省略符号来代表被修剪的文本. string:使用给定的字符串来代表被修剪的文本. 示例: css: p{ overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/* 超出部分显示省略号 */ white-space: nowrap;/*规定段落中的文本不进行换行 *…