php 文字超出画布,input实现文字超出省略号(代码示例)

本篇文章给大家带来的内容是关于input实现文字超出省略号(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

input实现文字省略号功能

普通元素实现文字超出宽度自动变成省略号非常简单,给元素加个宽度,然后再加这三句css即可:white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

有没有想过给input="text"元素也加这个效果呢?如图:

b5acfd9e7ebccba1c248c3583acda26a.png

input实现文字超出省略号功能

*{

margin: 0;

padding: 0;

}

.box{

width: 200px;

padding: 15px;

border: 1px solid #f60;

margin: 50px auto;

}

.form-control{

height: 30px;

line-height: 30px;

padding: 5px 10px;

}

.text-ellipsis{

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

}

h2{

width: 300px;

margin: 10px auto;

}

文字超出宽度自动变成省略号

其实,让input实现文字超出自动变省略号也非常简单,还是那三段代码。经测试,目前(2018-11-23)为止,只有最新的Chrome、Firefox两个浏览器支持,移动端未测试!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/540945.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c++ stl stack_C ++ STL中的stack :: top()函数

c stl stackPrototype: 原型&#xff1a; stack<T> st; //declarationT st.top();Parameter: 参数&#xff1a; No parameter passedReturn type: T //data type 返回类型&#xff1a; T //数据类型 Header file to be included: 包含的头文件&#xff1a; #include …

排序算法系列:插入排序算法

概述 直接插入排序&#xff08;Straight Insertion Sort&#xff09;的基本操作是将一个记录插入到已经排好序的有序表中&#xff0c;从而得到一个新的、记录数增1的有序表。 – 《大话数据结构》 版权说明 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载…

php点击复制按钮到我的粘贴板,js实现点击复制当前文本到剪贴板功能(兼容所有浏览器)...

最近做项目时&#xff0c;在网站框架搭建过程&#xff0c;有一个功能需要实现复制文本到剪贴板&#xff0c;相信这个功能很常用&#xff0c;但是对于不常写JS代码的我来说是一个比较大的挑战&#xff0c;回想以前做过的一个站点&#xff0c;使用window.clipboardData实现复制到…

算法导论 算法_算法导论

算法导论 算法Algorithms are an integral part of the development world. Before starting coding of any software first an effective algorithm is designed to get desired outputs. In this article, we will understand what are algorithms, characteristics of algor…

[Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容...

原文地址&#xff1a;http://blog.csdn.net/lovelyelfpop/article/details/50848524 插件地址&#xff1a;https://github.com/nordnet/cordova-hot-code-push 以下是我对GitHub项目readme的翻译 ——————————————————————————————————————…

java 如何重写迭代器,如何用Java按需定制自己的迭代器

编写自己的迭代器的流程是&#xff1a;首先实现Iterable接口&#xff0c;进而实现该接口中的Iterator iterator()方法&#xff0c;该方法返回接口Iterator&#xff0c;Iterator接口中封装了next&#xff0c;hasnext&#xff0c;remove等方法。实现了Iterable接口的类能够通过fo…

count函数里加函数_PHP count()函数与示例

count函数里加函数PHP count()函数 (PHP count() function) "count() function" is used to get the total number of elements of an array. “ count()函数”用于获取数组元素的总数。 Syntax: 句法&#xff1a; count(array, [count_mode])Here, 这里&#xff0…

php整合支付宝,Thinkphp5.0整合支付宝在线下单

thinkphp5.0支付宝在线支付下单整个流程&#xff0c;包括创建订单、支付成功回调更新订单状态、最终跳转到商户订单详情页查看演示下载资源&#xff1a;17次 下载资源下载积分&#xff1a;998积分支付宝在线支付控制器代码 public function alipay() {//发起支付宝支付$order_n…

python函数示例_PHP closeir()函数与示例

python函数示例PHP Closedir()函数 (PHP closedir() function) The full form of closedir is "Close Directory", the function closedir() is used to close an opened directory. Closedir的完整格式为“ Close Directory” &#xff0c; 函数closedir()用于关闭打…

java宋江,Java编程内功-数据结构与算法「单链表」,

package com.structures.linkedlist;public class SingleLinkedListDemo {public static void main(String[] args) {HeroNode heroNode1 new HeroNode(1, "宋江", "及时雨");HeroNode heroNode2 new HeroNode(2, "卢俊义", "玉麒麟"…

智能家居逐渐融入AI技术 向大众市场扩张仍需时间

虽然智能家居变得越来越普遍&#xff0c;并且大众认知度越来越高&#xff0c;但是在这一技术变得像智能手机一样无处不在之前&#xff0c;OEM和服务提供商仍然有很长的路要走。 在2016年11月在硅谷举行的智能家居峰会上&#xff0c;代表们听到了来自整个价值链上的声音&#xf…

python 示例_Python使用示例设置add()方法

python 示例设置add()方法 (Set add() Method) add() method is used to add an element to the set, the method accepts an element and adds the elements to this set. add()方法用于将元素添加到集合中&#xff0c;该方法接受元素并将元素添加到该集合中。 Note: If the …

php怎么引用表单元素,表单元素:最全的各种html表单元素获取和使用方法总结...

表单是网页与用户的交互工具&#xff0c;由一个元素作为容器构成&#xff0c;封装其他任何数量的表单控件&#xff0c;还有其他任何元素里可用的标签&#xff0c;表单能够包含、、、、、等表单控件元素。表单元素有哪些呢&#xff1f;它包含了如下的这些元素&#xff0c;输入文…

数据中心部署气流遏制系统需要考虑的十大要素

数据中心气流遏制策略能够大幅提高传统数据中心制冷系统的可预测性和效率。事实上&#xff0c;绿色网格组织&#xff08;The Green Grid&#xff09;将气流管理策略称作“实施数据中心节能计划的起点”。但是&#xff0c;大多数已有数据中心由于受各种条件的制约&#xff0c;只…

JAVA语言异常,Java语言中的异常

1、异常分类从产生源头来看&#xff0c;Java语言中的异常可以分为两类&#xff1a;JVM抛出的异常。比如&#xff1a;访问null引用会引发NullPointerException&#xff1b;0作为除数&#xff0c;如9/0&#xff0c;JVM会抛出ArithmeticException&#xff1b;内存消耗完&#xff0…

使用Mybatis Generator结合Ant脚本快速自动生成Model、Mapper等文件的方法

新建generatorConfig.xml和build_mybatis.xml&#xff1a; jar下载 <dependency><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-core</artifactId><version>1.3.2</version></dependency> <depe…

java bitset_Java BitSet or()方法与示例

java bitsetBitSet类或()方法 (BitSet Class or() method) or() method is available in java.util package. or()方法在java.util包中可用。 or() method is used to perform logical OR between this BitSet and the given BitSet(bs). This BitSet is updated when either t…

matlab 细化函数,MATLAB图像处理工具箱函数(细化篇).doc

MATLAB图像处理工具箱函数(细化篇)第3章 MATLAB数字图像处理工具箱3.1 MATLAB图像预处理3.1.1 图像处理的基本操作1. 读入并显示一幅图像clear %清除所有的工作平台变量close all %关闭已打开的图形窗口Iimread (pout.tif); %读取图像pout.tif(该图像是图像处理工具箱自带的图像…

STM32启动解析

启动方式对的不同下载模式 STM32可以通过BOOT引脚的配置&#xff0c;来选择不同的启动模式------对应不同的下载方式。 仿真器下载—— 内部FLASH的启动方式 串口下载 —— 系统存储器的启动方式 内部SRAM一般不用&#xff0c;不讲 启动过程 以内部FLASH的启动方式为例&am…

OpenBSD基金会收到锤子科技约140万捐赠款

11月26日消息&#xff0c;给开源项目捐款一向是锤子科技发布会的传统&#xff0c;去年发布会的门票收入捐给了国人章亦春主导的开源项目OpenResty。今年&#xff0c;锤子科技选择将收益捐赠给OpenBSD基金会。OpenBSD基金会收到锤子科技约140万捐赠款 OpenBSD基金会11月23日发布…