[分享]css3拉长圆角矩形中文字

CSS3 是 CSS 标准的升级版本，提供更强大的页面布局和样式效果。其中一个常用的效果是拉长圆角矩形中文字。下面我们来通过代码实现这个效果。.box { borderradius: 20px; / ...

CSS3 是 CSS 标准的升级版本，提供更强大的页面布局和样式效果。其中一个常用的效果是拉长圆角矩形中文字。下面我们来通过代码实现这个效果。

.box {
  border-radius: 20px; /* 圆角半径 */
  padding: 20px; /* 内边距 */
  width: 300px; /* 宽度 */
  height: 100px; /* 高度 */
  background-color: #F5F5F5;
}

.box p {
  margin: 0; /* 去除段落默认外边距 */
  text-align: center; /* 文字居中 */
  line-height: 100px; /* 行高等于容器高度，使文字居中 */
  white-space: nowrap; /* 文字不换行 */
  overflow: hidden; /* 隐藏溢出的文字 */
  text-overflow: ellipsis; /* 显示省略号 */
} 

我们先创建一个 div 容器，设置宽度、高度和背景色，并使用 border-radius 属性设置圆角半径。接下来，在容器中嵌入 p 标签，设置文字居中和行高等于容器高度，使文字垂直居中。使用 white-space 属性设置文字不换行，并使用 overflow 属性隐藏文字溢出，使用 text-overflow 属性显示省略号。

这样，文字就会在容器中垂直居中，并在超出容器宽度时以省略号的形式展示。可以根据实际需求调整容器的宽度和文字的字号，以达到理想的效果。