Div前台显示自动换行和不自动换行的问题

1、无法自动换行

* 问题：如果 div 输入的是英文字母且没有空格，会导致英文字母不换行直接在同一行输出，导致 div 的宽度远远超出设定的大小。

* 原因：因为在 div 中，英文字母之间没有空格的话，默认为一个英文单词，所以单词就一次输出不换行。

* 解决：通过设置 css：

word-wrap: break-word; /*自动换行*/

2、单行显示

* 问题：如果希望 div 输入的字符只在一行中显示，超过设定的大小则显示为 ...

* 解决：通过设置 css：

white-space: nowrap; /*不换行*/
overflow: hidden; /*超出的隐藏*/
text-overflow: ellipsis; /*超出部分自动用...来表示*/

Div前台显示自动换行和不自动换行的问题相关推荐

flex布局常用布局方式（一行显示固定个数，自动换行显示）
一行显示固定个数,自动换行显示基于uni-app实现一行显示固定个数的元素,元素可以遍历生成的,并且自动换行显示,效果如下图所示代码实现: <template><view cla ...
css4两个div并排,css怎么设置4个div并排显示
css设置4个div并排的方法:1.使用float属性让4个div浮动起来即可.2.使用"display:inline;"或"display: inline-block; ...
All about Div内显示滚动桥
Div内显示滚动桥看似是一个简单的前端问题,然而实际会发现还是有挺多需要注意的. 本文尝试对div内显示滚动桥的各种主要实现及一些难题进行研究. 横向滚动桥横向滚动桥比较简单,无需设置宽度,直接ov ...
两步轻松搞定编辑器上传图片尺寸过大超出前台显示区域问题！
用户在编辑器中随意上传图片,难免会遇到图片宽度超出前台显示区域,严重影响页面展示美观度.... 两步搞定方法: 1.书写在内容显示区域DIV中控制img标签最大宽度. 2.js清除用户设定宽度. 问题 ...
HTML页面中使两个div并排显示
在HTML中实现两个div并排显示,方法如下: 方法1:设置float浮动对需要并排显示的div设置样式:style="float:left;" <div style=&q ...
设置div中的div居中显示
设置div中的div居中显示方法一. <div class='big'><div class='small'>box1</div></div>styl ...
在html中加入滚动条,html在div中显示滚动条
基本思路:滚动条要添加到内容部分的父标签上(div),内容部分不设置大小,父标签要明确设置大小,并且父标签要添加overflow样式,并设置成auto. 打开的效果如下: 这时可能有人会问,父div的 ...
（转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）...
一.文字环绕效果: html代码如下: 1 <body>2 3 <style type="text/css">4 #big img {float: left ...
css中实现div的显示和隐藏
div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: style="visibility: none;" document.getElementByI ...

Div前台显示自动换行和不自动换行的问题

Div前台显示自动换行和不自动换行的问题相关推荐

最新文章

热门文章