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

(但是在移动端或用轮播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. Python - pydantic 入门介绍与 Models 的简单使用

    前言 为啥要学这个,因为 FastAPI 是基于它进行开发的,而且是个不错的框架,所以有必要深入学习 前置学习 Python 类型提示:https://www.cnblogs.com/poloyy/p ...

  2. Nmap 简单功能介绍/TCP Header/常见端口

    Nmap:Network Mapper,网络扫描和嗅探的工具包 基本功能有3个: 1.扫描主机端口,嗅探所提供的网络服务 2.探测一组主机是否在线 3.推断主机所用的操作系统,到达主机经过的路由,系统 ...

  3. 11-SpringCloud Hystrix

    Hystrix简介 分布式系统面临的问题 复杂分布式体系结构中的应用程序有数十个依赖关系,每个依赖关系在某些时候将不可避免地失败. 服务雪崩 多个微服务之间调用的时候,假设微服务A调用微服务B和微服务 ...

  4. 解密优酷智能生产技术，看 AI 赋能内容数字化

    2021 年,随着社会节奏的加快,用户碎片化消费时间不断增加,当前短视频的消费用户规模已超 7.73 亿人,短视频的市场规模超过 2000 亿元.短视频行业发展迅速,但也存在低质内容泛滥,精品内容稀缺 ...

  5. npm常用命令及其node相关工具汇总

    它是一个事件驱动异步I/O单进程的服务端JS环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好. 浏览器是JS的前端运行环境. Node.js是JS的后端运行环 ...

  6. SpringBoot学习之thymeleaf的使用

    thymeleaf介绍 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1 ...

  7. [SWMM]弗汝德数

    弗汝德数(Froude number)是流体内惯性力与重力的比值.弗汝德数(Fr)是水力学中重要的无量纲数之一,它表示过水断面上单位重量液体具有的平均动能与平均势能的比值,它也表示水流惯性力与重力的比 ...

  8. 测试工具Wiremock介绍

    WireMock是一个开源的测试工具,支持HTTP响应存根.请求验证.代理/拦截.记录和回放.最直接的用法: 为Web/移动应用构建Mock Service 快速创建Web API原型 模拟Web S ...

  9. 将svn项目导出，再导入到其他工作空间

    方法一: 对于一致svn地址,本地没有的项目,直接eclipse中svn检出即可. 若本地有项目,但想导入到另一个工作空间(即拷贝一份,不想再从svn拉),则需要用export方法. 方法二(expo ...

  10. Go进阶--httptest

    目录 基本使用 扩展使用 接口context使用 模拟调用 测试覆盖率 参考 单元测试的原则,就是你所测试的函数方法,不要受到所依赖环境的影响,比如网络访问等,因为有时候我们运行单元测试的时候,并没有 ...