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

(但是在移动端或用轮播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. SSM集成FastJson

    FastJson Json数据格式回顾 什么是json JSON:(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.它基于 ECMAScript( ...

  2. JCE加密和解密 bouncycastle

    https://blog.csdn.net/weixin_43935907/article/details/89155617 https://blog.csdn.net/qq_29583513/art ...

  3. Mysql的分区表

    概论: 分区表一般用作Mysql库表的水平切割(也就是常说的mysql性能优化的几种通用手法"读写分离.分库分表"中的一种),适用于单表的数据量可能很大的场景.因为分区表可以将一个 ...

  4. DAY04 与用户交 互格式化输出与运算符

    与用户交互 输入: input # python2与python3的区别 # python3 res = input('please in put your username>>>& ...

  5. C#给线程传递数据

    目录 0. 前情说明 1. ParameterizedThreadStart类型的委托 2. 使用自定义类 3. 使用Lambda表达式 4. 参考以及文中源代码下载 shanzm-2021年8月24 ...

  6. 题解 party?

    传送门 挺遗憾的一个题 考场上想到的思路是题解的退化版,可以有71pts(赛时以为只有20pts),但因为这一场的策略原因没有打-- 首先发现颜色种类数很少,可以直接bitset上树剖维护,炸不了空间 ...

  7. redis如何实现分布式锁？

    1.使用redis中的自增来实现 2.使用setnx + del # 如果不存在set(返回1),如果存在则失败(返回0) 为了避免死锁会加上一个过期时间 自增方式 boolean isSelf = ...

  8. IDEA debug启动的时候需要等半个小时甚至更长时间

    debug启动的时候需要等半个小时甚至更长时间 突然有一天发现debug启动不起来了, 在debug时,项目一直会出现 Connected to the VM ,address: 其实这不是debug ...

  9. Mybatis一对一、一对多、多对多查询。+MYSQL

    场景:使用三张数据表:student学生表.teacher教师表.position职位表 一个学生可以有多为老师.一位老师可以有多个学生.但是一个老师只能有一个职位:教授.副教授.讲师:但是一个职位可 ...

  10. 二级C语言题集

    时间:2015-5-13 18:01 在131题之后是按考点分类的题集,有需要的朋友可以看一下 ---------------------------------------------------- ...