「CSS」- 文本处理

修改文本样式

text-transform

https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

大写:text-transform: capitalize;

隐藏过长的文本,使其显示为省略号

html – text-overflow: ellipsis not working – Stack Overflow

我们需要隐藏文本行过长的部分,使其显示为省略号,保持其仅占有一行,而不是换行继续显示。该笔记将记录:如何隐藏过长文本,使其仅占用一行,而超出的部分显示为省略号。

span {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
    overflow: hidden
}

注意事项,需要设置 width 才可以,否则 text-overflow: ellipsis; 无法生效。

内容居中

配置 div 居中 | https://stackoverflow.com/questions/18649106/vertical-align-middle-in-div

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

#abc span {
  vertical-align:middle;
  display: table-cell;
}