-
2018-04-25 17:46:05
自动换行需要对标签元素写css样式
.content { width: 100%; height: auto; word-wrap:break-word; word-break:break-all; overflow: hidden; }
但自己这样写了但还是不起作用
原来是这样
.content-bottom-dl dt { width: 100%; max-height: 90px; line-height: 25px; font-size: 28px; color: #323232; letter-spacing: 2px; overflow: hidden; padding-bottom: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; font-family: "微软雅黑"; }
后来加了
word-wrap:break-word; word-break:break-all;
如果不起作用,说明是与原来的有冲突,所以去掉边距相关的后(起作用了,注意修改jsp页面中引用css的版本号-去掉缓存)
.content-bottom-dl dt { width: 100%; height: auto; word-wrap:break-word; word-break:break-all; overflow: hidden; font-size: 28px; color: #323232; font-family: "微软雅黑"; }
参考:https://blog.csdn.net/kerryqpw/article/details/70174702
更多相关内容 -
html pre标签使文本自动换行
2020-12-11 15:33:50使用<pre></pre>标签,并设置其样式如下: 复制代码代码如下: pre{ white-space:pre-wrap;... 该CSS方案可让pre标签内的文本自动换行,我在我有的浏览器上都测试了一下,全部支持,IE6,IE7,IE8,Fi -
HTMLspan标签如何做到自动换行?HTMLspan标签的用法介绍
2021-06-09 01:47:29本篇文章主要的为大家讲述的是HTML span标签是怎么做到自动换行的,介绍了span的七个属性的使用和介绍。接下来我们一起来看这篇文章吧首先我们介绍的肯定是如何做到让span标签自动换行的,我们先看一下这个例子:这...本篇文章主要的为大家讲述的是HTML span标签是怎么做到自动换行的,介绍了span的七个属性的使用和介绍。接下来我们一起来看这篇文章吧
首先我们介绍的肯定是如何做到让span标签自动换行的,我们先看一下这个例子:这是随便可以
输入的内容;这是随便可以输入的内容;这是随便可以输入的内容;这是随便可以输入的内容;这是随便可以输入的内容;这是随便可以
输入的内容;这是随便可以输入的内容;这是随便可以输入的内容;
HTML span标签的例子解释:
white-space :通过HTML文档的源代码的排版方式控制页面显示文本的排版方式
取值: normal | pre | nowrap | pre-wrap | pre-line | inheritnormal : 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)
pre : 保持HTML源代码的空格与换行,等同与pre标签
nowrap : 强制文本在一行,除非遇到br换行标签
pre-wrap : 同pre属性,但是遇到超出容器范围的时候会自动换行
pre-line : 同pre属性,但是遇到连续空格会被看作一个空格
看看上面代码在浏览器中的显示:
如图,上图显示的文本只占据了页面的80%,用这个设置自动换行感觉还是可以的。
再来看个关于HTML span标签的例子:这只是普通文本
这也是普通文本
HTML span标签的例子解释:
如果不对span应用样式,那么span元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的span元素仍然为p元素增加了额外的结构。
可以为span应用id或class属性,这样既可以增加适当的语义,又便于对span应用样式。
可以对同一个元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
提示:事实上,您也许已经注意到了,比如“提示”使用了粗体的橘红色。尽管实现这种效果的方法非常多,但是我们的做法是:使用“提示”使用span元素,然后对这个span元素的父元素,即p元素应用class,这样就可以对这个类的子元素span应用相应的样式了。
HTML:提示:这里是PHP文本
CSS:p.tip span {
font-weight:bold;
color:#ff9955;
}
效果图很简单:
html select下拉框样式怎么制作?html select样式详解
-
HTML常用标签之换行标签
2022-01-08 22:00:08换行标签<br/>,简单易懂,咱们直接来看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &...最近在学习html,在这里分享下自己的学习笔记~
换行标签
<br/>
,简单易懂,咱们直接来看代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> 我是换行<br />标签 </body> </html>
预览图如下~
补充
- 换行标签可以将一段文字强制换行
- 换行标签
<br/>
是一个单标签
-
html自动换行标签有哪些
2022-02-18 18:15:00只知道一个强制换行,其他自动换行的html文本标签还有哪些 -
HTML-换行标签
2021-06-13 18:05:481、换行标签单词缩写: break打断 换在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签语法:小驴拉磨下面的是一个段落在网页中要...1、换行标签
单词缩写: break打断 换
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签
语法:
小驴拉磨下面的是一个段落
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
image.png
这个时候还像在Word中回车换行是不起作用的,使用
标签image.png
小驴拉磨下面的是一个段落
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
-
html——段落标签和换行标签
2021-12-12 16:35:22在网页中,将文字分段显示,在HTML标签中,<p>标签用于定义段落,将整个网页分为多个段落。 <p></p> 标签语义:可以把HTML文档分割为若个段落 <!DOCTYPE html> <html lang="en"> ... -
javascript 一个自定义长度的文本自动换行的函数
2020-12-11 10:54:38word-break:break-all” 来解决这个问题,但有些时候会导致内容显示不完整而被隐藏了起来,并没有做到自动换行的效果。 于是偶就想写一个这样的函数来修补这个缺陷,这个函数很简单,但这里只是提供一种思路来解决... -
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2020-11-21 17:27:48pre显示文本内容时是不会自动换行的,此时可以添加一些CSS来解决: <pre>ourjs this is very very very very very very very very very very very very very very very logn contents. pre { word-wrap: break-... -
html pre标记里内容自动换行
2020-12-13 23:18:20被包围在 pre 元素中的文本通常会保留空格和换行符,但不幸的是,当你在标签里面写代码的时候,如果你没有手动换行,它也会给你保留,而不会自动换行。 这时候,你可以使用overflow:auto; (当代码超出容器边界的时候... -
html中div不自动换行、强制不换行的具体实现
2020-12-04 02:59:301.用标签实现不换行 复制代码代码如下: <div>Hello world!<nobr> Hello world!<nobr></div> 2.用<用nowrap元素>标签 复制代码代码如下: <div>Hello world! Hello world! Hello world! Hello world!</div> 3... -
html 文本自动换行
2021-06-09 01:10:25其中可能对英文换行可能会分开一个单词问题:解决如下: 语法: word-break : normal | break-all | keep-all 参数: normal : 依照亚洲语言和非亚洲语言的文本规则html 文本自动换行其实只要在表格控制中添加一句... -
【HTML】让标签文本自动换行
2021-06-08 17:01:31但是,默认情况下, 标签中的内容若超出范围不会自动换行,这样无论在显示或打印都会出现麻烦。下面提供符合 W3C 标准并支持多浏览器的 CSS 样式代码:pre{white-space:pre-wrap;white-space:-moz-pre... -
Vscode 设置html标签不要自动换行
2021-10-15 12:02:58Vscode 设置html标签不要自动换行 1、安装两个格式化插件(vetur、prettier) 二、找到vueter的配置格式的json文件 三、添加代码防止html标签自动换行 // 禁止html标签自动换行 "vetur.format.... -
CSS样式里pre是什么?HTML中pre自动换行code标签作用
2021-06-09 07:55:14HTML标签示例以下是 pre标签的CSS样式(能让html代码自动换行)▼pre {border: 1px solid #d1d1d1;line-height: 190%;margin: 0 0 1.75em;max-width: 100%;overflow: auto;padding: 15px;white-space: pre;... -
HTML自动换行的问题
2021-06-09 02:50:42有时文本文字已经超过所在的区域,但是文字还是不自动换行可以用强制换行强制不换行div{ white-space:nowrap;}自动换行div{ word-wrap:break-word; word-break:normal;}强制英文单词断行div{ word-break:break-all;}... -
html -- pre标签内容如何自动换行?
2022-04-02 15:02:45但是如果长度太长的话可以自动化行,而pre标签默认是不给换行的。 代码如下: <template> <div class="pre_container"> <pre> 而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址... -
html小技巧之td,div标签里内容不换行
2020-10-25 22:10:27主要介绍了td,div标签里内容不换行的方法,需要的朋友可以参考下 -
div+pre标签的组合实现文本原格式显示与自动换行
2021-01-21 14:05:14而为了限制文本显示的范围,一般使用div+css设定自动换行或缩略等样式。对于未知的文本格式,如果要求文本单行过长时换行显示,并且保留原文本的空格和换行符,就可以通过div+pre标签的组合,再分别设定各自的样式来... -
vscode行内标签自动换行
2021-09-20 18:10:39在写HTML时用emmet语法写多个行内标签,发现标签都挤在一行里显示,而不是分行显示。 这样看起来也是十分难受。 例如:div>span*3 原先效果: 这种看起来也是眼花缭乱。 而我想要的效果是:也是经过我的不懈百度... -
html中自动换行标记[转]
2017-05-02 13:23:14word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。 它们的区别就在于: 1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长... -
vue 保存自动格式化, html自动缩进 双引号变为单引号 注释加空格 html标签属性设置不换行 亲测有效!
2021-01-08 10:59:07设置vscode自动格式化 开启语法检查(安装ESLint,检查语法保证代码的规范性) 安装Vetur插件 打开vscode的setting.json文件(文件–>首选项–>输入vetur搜索,往下找到在setting.json文件中编辑) 将如下代码复制到... -
如何禁止html自动换行
2021-06-09 05:36:12禁止html自动换行的方法:1、给html元素添加“display:inline”样式,将元素设置为行内元素;2、给html元素添加“float:left”样式,使元素脱离文档流,浮动到同一行显示。本教程操作环境:windows7系统、CSS3&&... -
HTML Label标签文字自动换行解决方案
2021-01-25 15:42:00在写表单过程中,有时由于label内文字内容过长,会出现文字自动换行的现象,使得表单不美观,可通过添加style="white-space: nowrap"避免换行 <label class="layui-form-label" style="white-space: nowrap">... -
pre 标签自动换行
2021-02-20 14:06:40标签的一个常见应用就是用来表示计算机的源代码。 而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长,结果会造成页面撑开或者代码超出边界,如果用overflow:hidden那么会将原来的... -
html label标签内 文字自动换行
2020-09-02 13:41:41下面提供符合 W3C 标准并支持多浏览器的 CSS 样式代码: .label{ white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;...... -
p标签自动换行问题
2021-10-11 11:44:26css样式(通用) p{ word-break: break-all; white-space:normal; word-wrap: break-word; } ...(sjdklasjdlkajsdlajsdjaasdjasdjaisda213123123123jl1k2j3l1k23j)测试测试测试测试测试测试测试测试测试测试测试...