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

(但是在移动端或用轮播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. 基于SpringBoot的药店管理系统java药房管理系统（源码+数据库文件+文档）

    注意:该项目只展示部分功能,如需了解,评论区咨询即可. 1.开发环境 开发语言:Java 后台框架:SpringBoot 前端技术:HTML+CSS+JavaScript+Bootstrap+jQue ...

  2. 【笔记】KNN之超参数

    超参数 超参数 很多时候,对于算法来说,关于这个传入的参数,传什么样的值是最好的? 这就涉及到了机器学习领域的超参数 超参数简单来说就是在我们运行机器学习之前用来指定的那个参数,就是在算法运行前需要决 ...

  3. 文件上传 安鸾 Writeup

    目录 Nginx解析漏洞 文件上传 01 文件上传 02 可以先学习一下文件上传相关漏洞文章: https://www.geekby.site/2021/01/文件上传漏洞/ https://xz.a ...

  4. Git（9）-- 远程仓库的使用

    @ 目录 1.查看远程仓库:git remote 2.添加远程仓库:git remote add 3.从远程仓库中抓取与拉取:git fetch和 git pull 4.推送到远程仓库:git pus ...

  5. Xilinx约束学习笔记（二）—— 定义时钟

    2. 定义时钟 2.1 关于时钟 为了获得最佳精度路径覆盖信息,必须正确定义时钟. 时钟要定义在时钟树的根 pin 或 port 上,称为 source point. 时钟的边缘应该由周期和波形进行组 ...

  6. Java社区——个人项目开发笔记（一）

    1.maven安装与测试 安装过程略,常用的maven命令行工具: mvn --version 查看maven版本 mvn compile 编译maven工程 mvn clean 删除编译文件 mvn ...

  7. 第一次上传代码到gitee

    初始化 git init 添加文件到本地仓库 git add . 提交文件到本地仓库 git remote add origin 仓库地址 拉去远程仓库代码 git pull origin maste ...

  8. vue同一个页面可以有多个router-view

    参考:https://blog.csdn.net/u011615787/article/details/80075240 参考:https://router.vuejs.org/zh/guide/es ...

  9. jdbc获取PreparedStatement最终执行的sql语句

    //直接打印PreparedStatement对象 System.out.println(ps); 输出结果: com.mysql.jdbc.JDBC42PreparedStatement@5f205 ...

  10. 一招解决下载或下拉GitHub项目速度太慢的问题

    相信很多朋友都有过这样的体验,就是从Github上下载或clone别人的项目时特别慢,甚至还会出现链接意外终止的情况,那么今天就来给大家分享一个提速的方法,步骤也非常简单,亲测有效! 首先进入你的目标 ...