1.实现效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210621170459640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5MzcyMA==,size_16,color_FFFFFF,t_70)
2.实现思路
- 一个容器,包含内部所有内容container
- 三个元素,左边,右边为线,中间是title内容
- 标题字数不固定,所以宽度不可限制,或者太长需要换行根据场景进行设置
- flex布局,不可压缩的设置flex-shrink:0;
3.代码实现
<!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>面包屑</title>
<style>
.container{
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 200px;
border: 1px solid lightskyblue;
}
.title{
margin: 0 10px;
flex-shrink: 0;
}
.line{
height:1px;
width: 100%;
background:lightpink
}
</style>
</head>
<body>
<div class="container">
<div class="line"></div>
<h2 class="title">中间标题</h2>
<div class="line"></div>
</div>
<script>
// window.onload = changeTitle()
// function changeTitle(){
// setTimeout(()=>{
// document.getElementsByClassName('title')[0].innerHTML = "标题字数改变标题字数改变标题字数改变"
// },2000)
// }
</script>
</body>
</html>