有的时候可能会有这样的需求，一个竖直的输入框，输入信息，文字也是从上到下排列；

(但是在移动端或用轮播swiper时不起作用,可以用textarea代替input)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

.abc{

width: 50px;

height: 400px;

border: 2px solid red;

box-sizing: border-box;

padding: 10px;

font-size: 30px;

-webkit-user-select:text;

}

</style>

</head>

<body>

<div class="abc" contenteditable=true>请输入你的名字</div>

</body>

</html>

input竖直的输入框，文字从上到下排列的更多相关文章

  1. android中自定义view---实现竖直方向的文字功能，文字方向朝上，同时提供接口，判断当前touch的是哪个字符，并改变颜色

    android自定义view,实现竖直方向的文字功能,文字方向朝上,同时提供接口,判断当前touch的是哪个字符,并改变颜色. 由于时间比较仓促,因此没有对代码进行过多的优化,功能远远不如androi ...

  2. writing-mode，文字竖直书写，字符之间距离，单词之间距离

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 水平/竖直居中在旧版Safari上的bug

    今天调了两个出现在旧版Safari上的layout bug. 它们最初是在同事的iPad上被发现的, 我在自己桌面上安装的Safari 5.1.7上也能够复现. Bug1: .vertical-cen ...

  4. css控制竖直文字显示

    假如有一天,你把水平文字看腻味了...... 我建议你不妨试试垂直文字显示,就像这样: 我 是 竖 直 显 示 的 : 哈哈! 言归正传,怎么把一段话,垂直显示呢? 方法1: //把下面代码另存为ht ...

  5. ie8下input文字偏上select文字偏下

    1.ie8下input文字偏上 正常情况下input的显示情况如下 当设置input的高度时,就会出现文字不垂直居中偏上的情况,如图 解决方案 强input的行高line-height与其高度设置一致 ...

  6. [LeetCode] Binary Tree Vertical Order Traversal 二叉树的竖直遍历

    Given a binary tree, return the vertical order traversal of its nodes' values. (ie, from top to bott ...

  7. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  8. [LeetCode] 314. Binary Tree Vertical Order Traversal 二叉树的竖直遍历

    Given a binary tree, return the vertical order traversal of its nodes' values. (ie, from top to bott ...

  9. CollectionView水平和竖直瀑布流的实现

    最近在项目中需要实现一个水平的瀑布流(即每个Cell的高度是固定的,但是长度是不固定的),因为需要重写系统 UICollectionViewLayout中的一些方法通过计算去实现手动布局,所以本着代码 ...

随机推荐

  1. STM32—DAC配置

    文章目录 一.DAC介绍 二.主要寄存器说明 三.代码及配置 一.DAC介绍 ADC是模数转换器,可以将模拟电压转换位数字信号:DAC是数模转换器,可以将数字信号转换为模拟电压. STM32F103Z ...

  2. Pytest-Allure报告的Logo的完美定制

    --本次需求:如何把生成的pytest-allure报告的logo修改成自定义的logo? --步骤如下: --1.找到本地电脑安装的allure-2.13.2路径E:\allure-2.13.2\p ...

  3. IOC概念和原理：BeanFactory 接口与ApplicationContext

    IOC(概念和原理)1.什么是 IOC(1)控制反转,把对象创建和对象之间的调用过程,交给 Spring 进行管理(2)使用 IOC 目的:为了耦合度降低(3)做入门案例就是 IOC 实现2.IOC ...

  4. Mysql 之 IFNULL(expr1,expr2) 对空不可判

    目标 当传入参数 @OrderId为空时 不做过滤 sql语句如下 SELECT o.* FROM `order` AS o LEFT JOIN receivemoneyconfirm AS re O ...

  5. 【springboot】自定义启动器

    本文只对springboot自定义启动器的具体实现进行描述,不涉及springboot自动装配原理的介绍. 对springboot自动配置原理感兴趣的请移步 狂神说SpringBoot02:运行原理初 ...

  6. Qt中子窗口关闭之后，立即释放资源的方法

    用Qt做界面的时候,很多时候都会遇见点击一个按钮弹出一个新的窗口的功能.我在刚开始做这个功能的时候,直接是点击一次按钮就new一个新的窗口,每次都只是将子窗口关闭而已,并没有去释放子窗口的资源,这样就 ...

  7. C++：继承

    共有继承(public),私有继承(private),保护继承(protected): 1.public继承: 基类成员类型 作为派生类成员 在派生类中是否可见 对派生类对象的可见性 public p ...

  8. 状态码1xx-6xx的含义

    1xx (临时响应)表示临时响应并需要请求者继续执行操作的状态代码. 100 (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分. 101 (切换协议) 请 ...

  9. MySQL-SQL基础1

    p.p1 { margin: 0; font: 11px Menlo; background-color: rgba(128, 128, 128, 0.5); min-height: 13px } p ...

  10. C#多线程开发-线程同步 02

    上一篇文章主要带领大家认识了线程,也了解到了线程的基本用法和状态,接下来就让我们一起学习下什么是线程同步. 线程中异常的处理 在线程中始终使用try/catch代码块是非常重要的,因为不可能在线程代码 ...