JSFiddle - React, Tailwind, and code Playground

by Wang Shuo

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<h2>grid:</h2>
<div class="parent grid">
  <div class="child"><p>我是一段超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级长的文字</p></div>
</div>
<h2>flex:</h2>
<div class="parent flex">
  <div class="child"><p>我是一段超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级长的文字</p></div>
</div>
</body>
</html>

CSS

body{
  background: #f5f5f5;
}
.parent{
  background-color: #fff;
  margin-top: 20px;
}
.child p {
  background-color: #ccc;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: normal;
}

.parent.grid{
  display: grid;
}

.parent.flex{
  display: flex;
}

.child{
  min-width: 0;
}