整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML里h1~h6标签和p标签里的内容不会自动换行?

-p标签内文字在界面内是换行显示的,但是在网页中不换行,问题怎么用现有学习的知识解决.

上图中单纯的在p标签内换行,但是没有显示换行,怎么用初学经验解决

1-1 使用标题标签h1~h6实现换行

1-2 用p标签断开,实现换行

1-3用换行标签 br 实现换行

1-4用分割线实现换行

(仅是学习总结,相信还有其他的办法,但是现阶段html还没有学到,后期再加~)

古诗文文字示例

筹笔驿

抛掷南阳为主忧,北征东讨尽良筹。

时来天地皆同力,运去英雄不自由。

千里山河轻孺子,两朝冠剑恨谯周。

唯余岩下多情水,犹解年年傍驿流。

示例截图如下(去掉一些自己测试写的东西主要的留下了刚好能截全)

(仅为个人自学的一点点思考,如有错漏,欢迎留言指正,还有许多的问题呈现,敬请期待~~~)

HTML的经常会遇到一长串连续的字幕或者数字在页面中没办法折断换行,导致了页面排版很乱。

默认情况下,一个 DIV或者其他元素的文本,如果都是无文字分隔符,无空格,则不会自动换行。

其实用一句很经典的CSS,就可以解决这个大麻烦。代码如下:

<div class="detail_title" style="word-break: break-all;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

把这段代码放到HTML文件里试试看。

5代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p{
            width: 200px;
            background-color: #aaa;
        }
        .p1{
            white-space: nowrap;
        }
        .p2{
            word-wrap: break-word;
        }
        .p3{
            word-break: break-all;
        }
        .p4{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<p class="p1">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p>
<p class="p2">ljj ljljoi hsgfa tgregv dsgrewg ygvsg werfwgr rweg vcdgss</p>
<p class="p3">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p>
<p class="p4">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew dgadsfs</p>
</body>
</html>


  1. 强制不换行:white-space 属性是用来设置如何处理元素中的空白;

属性:

  • normal 默认。空白会被浏览器忽略。
  • pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
  • nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止。
  • pre-wrap 保留空白符序列,但是正常地进行换行。
  • pre-line 合并空白符序列,但是保留换行符。
  • inherit 规定应该从父元素继承 white-space 属性的值。
p{  white-space: nowrap;}


2、自动换行:word-wrap属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象;

属性:

  • normal: 只在允许的断字点换行(浏览器保持默认处理)
  • break-word:在长单词或URL地址内部进行换行
p{  word-wrap: break-word;}


3、强制断行:word-break 属性用来标明怎么样进行单词内的断句;

属性:

  • normal:使用浏览器默认的换行规则。
  • break-all:允许在单词内换行
  • keep-all:只能在半角空格或连字符处换行
p{  word-break: break-all;}


4、溢出显示省略号:ext-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切,显示一个省略号(’…’,U + 2026 HORIZONTAL ELLIPSIS)或显示一个自定义字符串;

  • 属性:clip这个关键字的意思是"在内容区域的极限处截断文本",因此在字符的中间可能会发生截断。为了能在两个字符过渡处截断,你必须使用一个空字符串值 (’’)(To truncate at the transition between two characters, the empty string value (’’) must be used.)。此为默认值。
  • ellipsis这个关键字的意思是“用一个省略号 (’…’, U+2026 HORIZONTAL ELLIPSIS)来表示被截断的文本”。这个省略号被添加在内容区域中,因此会减少显示的文本。如果空间太小到连省略号都容纳不下,那么这个省略号也会被截断。
  • string用来表示被截断的文本。字符串内容将被添加在内容区域中,所以会减少显示出的文本。如果空间太小到连省略号都容纳不下,那么这个字符串也会被截断。
p{ overflow: hidden; text-overflow: ellipsis;}