css有趣的面试题

on 2023-07-13 | by Mark24 0 关注作者

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