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

(但是在移动端或用轮播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. iOS开发之Lame编译

    前言 为了保证音频格式在多端通用,需要将音频转化为MP3格式,本文讲解了如何使用Shell脚本来编译lame库. 编译脚本 #!/bin/sh CONFIGURE_FLAGS="--disa ...

  2. JVM 基础面试题总结

    hey guys, 各位小伙伴们大家好,这里是程序员cxuan,欢迎你收看我新一期的文章,这篇文章我花了几天时间给你汇总了一波 JVM 的基础知识和面试题,内容还不是很全,我还在连载中,这篇文章相当于 ...

  3. NOIP 模拟 $34\; \rm Merchant$

    题解 \(by\;zj\varphi\) 对于选的物品,总值一定有在前一段区间递减,后一段递增的性质,那么就可以二分. check()时只递归归并大的一段,用nth_element即可 Code #i ...

  4. 题解 Lost My Music

    传送门 多明显的斜率式然而我没有看出来 然而不管是我乱搞的思路还是正解的凸包思路都需要一个可持久化栈 考场上想到可持久化单调栈,但不会实现-- 其实单调栈不管是否可持久化都能倍增弹栈 但普通单调栈本来 ...

  5. WPF - 简单的UI框架 - 仪表盘

    源码链接:https://github.com/DuelWithSelf/WPFEffects 参考:https://www.cnblogs.com/duel/p/duel_clock.html 更新 ...

  6. C#的6种常用集合类

    一.先来说说数组的不足(也可以说集合与数组的区别): 1.数组是固定大小的,不能伸缩.虽然System.Array.Resize这个泛型方法可以重置数组大小,但是该方法是重新创建新设置大小的数组,用的 ...

  7. （四）HXDZ-30102-ACC检测心率血氧数据并通过串口助手显示

    主要参考模块说明书 写在前面的话 硬件原理我是真的搞不明白,所以心率血氧传感器数据检测就是模块卖家自带的代码... 我使用HXDZ-30102-ACC传感器也是偶然在网上检索到的,集成心率血氧和三轴加 ...

  8. java输入字符

    1.创建一个Scanner对象. 2.调用.next()返回一个String类型用一个变量接受. 3.调用该String变量的.charAt(0),获取第一个字符. Scanner scn=new S ...

  9. linux centos 网卡有关调试

    本文章出至于设置固定IP不起作用,名称也无法修改 1.设置网卡配置文件 打开文件 vi /etc/sysconfig/network-scripts/ifcfg-enp8s0 把NAME.DEVICE ...

  10. HCNP Routing&Switching之OSPF虚连接

    前文我们了解了OSPF的网络类型.帧中继交换机映射以及路由器帧中继映射相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15195762.html:今天我 ...