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

(但是在移动端或用轮播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. centos7上用docker搭建简单的前后端分离项目

    1. 安装docker Docker 要求 CentOS 系统的内核版本高于 3.10 ,首先验证你的CentOS 版本是否支持 Docker . 通过 uname -r 命令查看你当前的内核版本 使 ...

  2. 【笔记】numpy.array基础（2）

    numpy数组的基本操作 以几个数组为例 使用ndim可以显示出是几维数组 使用shape可以查看元素维度数 使用size可以查看元素个数 对一维数组进行数据访问 对多维数组进行数据访问 切片访问,使 ...

  3. VBA·Function的基础使用

    阅文时长 | 0.27分钟 字数统计 | 440字符 主要内容 | 1.引言&背景 2.基本结构 3.Demo示例 4.声明与参考资料 『VBA·Function的基础使用』 编写人 | SC ...

  4. 算法入门 - 动态数组的实现（Java版本）

    静态数组 Java中最基本的数组大家肯定不会陌生: int[] array = new int[6]; for (int i = 0; i < array.length; i++){ array ...

  5. .NET Core垃圾收集

    在本章中,我们将介绍垃圾收集的概念,垃圾收集是.NET托管代码平台最重要的特性之一. 垃圾收集器(GC)管理内存的分配和释放. 垃圾收集器用作自动内存管理器. 我们不需要知道如何分配和释放内存或管理使 ...

  6. vue + iview 怎样在vue项目下添加ESLint

    参考:https://segmentfault.com/a/1190000012019019?utm_source=tag-newest 使用iview框架的MenuGroup标签,vscode报红, ...

  7. 09.SpringMVC之类型转换

    一. 类型转换器 前端传入的值,从表单中传入的值,都是字符串或者是字符串数组的形式传入的,在后端需要进行手动的转换类型,然后才能正确的使用. 框架一般对常见的数据类型的转换进行了封装提供,如字符串转换 ...

  8. RibbitMQ 实战教程

    # RabbitMQ 实战教程 ## 1.MQ引言 ### 1.1 什么是MQ `MQ`(Message Quene) : 翻译为 `消息队列`,通过典型的 `生产者`和`消费者`模型,生产者不断向消 ...

  9. ES6扩展——正则扩展（u、y修饰符）

    //下面三行代码效果一样 //全局匹配开头为a的 const regexp1 = /^a/g; const regexp2 = new RegExp('a','g'); const regexp3 = ...

  10. 一个简单的 aiax请求例子

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...