实现竖直的输入框，文字从上到下排列

最新推荐文章于 2022-08-25 12:18:28 发布

cvper

最新推荐文章于 2022-08-25 12:18:28 发布

阅读量4.4k

点赞数 1

分类专栏：坑文章标签：竖直输入框从上到下排列

本文链接：https://blog.csdn.net/cvper/article/details/80871557

版权

坑专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

下面我们可以利用div来实现这样的需求：

（1）设置 div 可编辑 contenteditable = true

（2）对于 ios有些问题，还需要设置下 -web-kit-user-select：text；

   <!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 
  :  
  50 
  px 
  ; 
 
 
    
  height 
  :  
  400 
  px 
  ; 
 
 
    
  border 
  :  
  2 
  px 
   solid red; 
 
 
    
  box-sizing 
  : border-box; 
 
 
    
  padding 
  :  
  10 
  px 
  ; 
 
 
    
  font-size 
  :  
  30 
  px 
  ; 
 
 
    
  -webkit-user-select 
  :text; 
 
 
   } 
 
 
    
  < 
  / 
  style 
  > 
 

   </ 
  head> 
 

   < 
  body> 
 
 
  < 
  div 
  class= 
  "abc" 
  contenteditable= 
  true 
  >请输入你的名字 
  </ 
  div 
  > 
 

   </ 
  body> 
 

   </ 
  html> 
 