重新认识HTML中的p标签

HTML中p标签为段落标签,在正常情况下p标签中的内容会自动换行,如下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>HTML中的p标签</title>
	</head>

	<body>
		<p>Trouble will find you no matter where you go, oh oh No matter if you‘re fast, no matter if you‘re slow, oh oh The eye of the storm wanna cry in the morn, oh oh You‘re fine for a while but you start to lose control </p
	</body>
</html>

浏览器渲染后效果如下图:

可是如果p标签中为非正常内容呢,如下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>HTML中的p标签</title>
	</head>

	<body>
		<p>000000000011111111112222222222333333333344444444445555555555666666666677777777778888888888999999999900000000001111111111222222222233333333334444444444555555555566666666667777777777888888888899999999990000000000111111111122222222223333333333444444444455555555556666666666777777777788888888889999999999</p
	</body>
</html>

浏览器渲染后效果如下图:

那么怎么修复这个问题呢?非常简单——为p标签添加如下样式属性即可:

<style>
	p{
		word-wrap:break-word;
	}
</style>
时间: 2024-08-26 14:43:08

重新认识HTML中的p标签的相关文章

HTML中的&lt;select&gt;标签如何设置默认选中的选项

方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  "sel" > < option  value = "1" >1</ option > < option  value = "2"  selected = "selected" >2</ opt

js去除字符串中所有html标签及&amp;nbsp符号

近日在做项目的时候,经常会在页面上处理一些数据.结果发现自己js掌握的并不是很好.那就在这里记录js的点点滴滴吧. 1. 去除字符串中的 html 标签 function delHtmlTag(str){ return str.replace(/<[^>]+>/g,""); } var str = "<span style='display:none;'>This is test</span><br/>"; st

Android 布局中的include标签使用

Android 布局中的include标签使用 最近在布局时,有好多页面都是有共同特点的,比如标题:一个同样的样式! 如下图所示: 如果给每个页面都单独的写一个标题的布局那就太麻烦了,如果能写一个标题布局,其它页面重用该多好! 这个时候,<include> 就隆重登场了! 写一个标题的布局 title.xml: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:an

HTML 中的marquee标签详解

该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果 该标签是个容器标签 语法: <marquee></marquee> 以下是一个最简单的例子: 代码如下: <marquee><font size=+3 color=red>Hello, World</font></marquee> 下面这两个事件经常用到: onMouseOut=&q

html文档中的DOCTYPE标签

在写html页面的时候我们一般都会在首行添加〈!DOCTYPE〉的标签,有些编辑器会自动帮我们添加,今天讲讲这个〈!DOCTYPE〉标签的作用. HTML与XHTML 在W3C组织还么颁发html标准之前,开发网页的时候大家都没有加这个标签,那个时候.html页面的开发也比较混乱,直到1999年的时候,HTML 4.01成为了推荐标准,那时候起大多数人都使用这个版本.又大概在2000年的时候,W3C组织又颁发了基于HTML4.01的XML版本,并命名为XHTML1.0. 两者其实主要的差别是XH

Django自定义模型(model)中的字段标签

方法一: 在编辑页面中,每个字段的标签都是从模块的字段名称生成的. 规则很简单: 用空格替换下划线:首字母大写.例如:Book模块中publication_date的标签是Publication date. 然而,字段名称并不总是贴切的.有些情况下,你可能想自定义一个标签. 你只需在模块中指定verbose_name. 举个例子,说明如何将Author.email的标签改为e-mail,中间有个横线. class Author(models.Model): first_name = models

java web中jsp常用标签

在jsp页面开发过程中,经常需要使用JSTL(Java Server Pages Standard Tag Library)标签开开发页面,是看起来更加的规整舒服. JSTL主要提供了5大类标签库: 1. 核心标签库: 为日常任务提供通用支持,如显示和设置变量,重复使用一组项目,测试条件以及其他操作(如导入和重定向web页面等). 2. 国际化(I18N)标签库: 支持多种语言的引用程序. 3. SQL标签库: 对访问和修改数据库提供标准化支持. 4. XML标签库: 对XML文件处理和操作提供

ckeditor编辑器中去除p标签

ckeditor中默认添加p标签.去掉<p>标签的方法在ckeditor文件下config.js中加: config.shiftEnterMode = CKEDITOR.ENTER_P; 如果你想在ckeditor编辑的时候把回车换成<br/>标签,加: config.enterMode = CKEDITOR.ENTER_BR; 如果你想把编辑器设置为源码模式,加: config.startupMode = 'source'; ckeditor编辑器中去除p标签,布布扣,bubuk

HTML中的a标签实现点击下载

HTML中的a标签实现点击下载 通常在咱们写项目的时候会遇到上传下载什么的,在上传完文件后会把文件的路径保存到数据库里以便下载,如果想不通过后台直接下载的话,可以把文件路径给a标签的属性href: <a href="/user/test/xxxx.txt">点击下载</a> 这样当用户打开浏览器点击链接的时候就会直接下载文件. 但是有个情况,比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的,而是会直接打开文件,这个时候就需要给a标签添

二十四、Struts2中的UI标签

二十四.Struts2中的UI标签 Struts2中UI标签的优势: 数据回显 页面布局和排版(Freemark),struts2提供了一些常用的排版(主题:xhtml默认 simple ajax) 可以使用OGNL表达式 模板: 常量设置的:struts.ui.theme=xhtml 开发中建议设置为struts.ui.theme=simple;