css有趣的面试题

1.要求纯CSS 实现效果:文字内容一行居中,两行居左

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .demo {
    width: 100%;
    text-align: center;
    word-break: break-all;
  }
  .example {
    display: inline-block;
    text-align: left;
  }
</style>
<body>
<div class="demo">
  <div class="example">
    ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
  </div>
</div>
</body>
</html>

那外面让里面居中。就是 没填充满,自然是居中,全部满了,就反映出子元素的一个排列特征了。

题目的描述具有一种迷惑性。

文章来源:

Author:Mark24
link:https://mark24code.github.io/未定义/2023/07/13/css有趣的面试题.html