上图中单纯的在p标签内换行,但是没有显示换行,怎么用初学经验解决
(仅是学习总结,相信还有其他的办法,但是现阶段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>
属性:
p{ white-space: nowrap;}
2、自动换行:word-wrap属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象;
属性:
p{ word-wrap: break-word;}
3、强制断行:word-break 属性用来标明怎么样进行单词内的断句;
属性:
p{ word-break: break-all;}
4、溢出显示省略号:ext-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切,显示一个省略号(’…’,U + 2026 HORIZONTAL ELLIPSIS)或显示一个自定义字符串;
p{ overflow: hidden; text-overflow: ellipsis;}
*请认真填写需求信息,我们会在24小时内与您取得联系。