如何使div中文本与输入框不换行

 时间:2024-10-31 03:31:18

在html页面开发中,我们经常会在div中显示一些文本内容,或者在文本输入框里让用虿搦糍掏户输入内容,在默认情况下,这些内容都会自动换行的,那么如何设置可以让其不换行?下面我们来看一下。

方法/步骤

1、首先我们在Html里写上对应的代码,div,和textarea控件里都有一些文本内容。

如何使div中文本与输入框不换行

2、现在从页面上看,div设置了宽度后,它和textarea一样,当文本内容超过宽度后,就会自动换行了。

如何使div中文本与输入框不换行

3、要让其不换行,也很简单,可以直接添加一个样式就行了。white-space:nowrap;就是让文本不换行的样式。

如何使div中文本与输入框不换行

4、现在看页面,文本没有换行了,文本输入框有了滚动条。但div里的内容超长显示了,很不美观。

如何使div中文本与输入框不换行

5、为了让div不超长显示,我们可以添加另外一个样式,overflow:hidden;这是让超长内容自动隐藏。

如何使div中文本与输入框不换行

6、从页面上看,内容确实没有超长显示了。但右边的内容太靠边线了。

如何使div中文本与输入框不换行

7、要处理上面的问题,我们只能嵌套二个d坡纠课柩iv了,然后把样式内容修改一些,把不换行和超长隐藏的样式放到里层的div里。代码如图。

如何使div中文本与输入框不换行

如何使div中文本与输入框不换行

8、再刷新页面看一下,现在显示较为美观一点了。

如何使div中文本与输入框不换行

powerdesigner创建应用架构图 如何使用form表单将数据提交给php? eclipse如何在某一行添加一个标记 直接在myeclipse里写代码新建数据库 sql软件怎么利用sql语句修改工作表
热门搜索
师傅电影 抢先看电影网 生活标志图片大全 江淮轻卡报价及图片 关于思考的图片