CSS记录贴

最新推荐文章于 2023-09-16 16:35:55 发布

AlexKain

最新推荐文章于 2023-09-16 16:35:55 发布

阅读量115

点赞数

文章标签：折行显示不折行显示

本文链接：https://blog.csdn.net/webfullstack/article/details/82589430

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

不折行显示,多余的用…显示:

.text-ellipsis{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space:nowrap;
}

折行显示,汉字和字母都折行

.text-noellipsis{
	white-space: normal;
	word-wrap: break-word;
	word-break: break-all;
}

2018-9-11 12:59:59
关于flex布局的记录
父级容器使用flex布局使用flex-wrap: wrap;元素使用width:50%(偶数行使用 width: calc(50% - 0.2rem)?

.earnCoin {
        .boay {
          display: flex;
          flex-direction: row;
          align-items: center;
          flex-wrap: wrap;
          background-color: #fff;
          padding: 0.2rem 0.1rem;
          .itemrow {
            display: flex;
            flex-direction: row;
            align-items: center;
            box-sizing: border-box;
            width: 50%;
            background-color: #f5f8fa;
            padding: 0.2rem 0.1rem 0.1rem.1rem;
            &:nth-child(2n-1) {
              width: 50%;
            }
            &:nth-child(2n) {
              width: calc(50% - 0.2rem);
              margin-left: 0.2rem;
            }
            // margin-left: 0.2rem;
            margin-bottom: 0.1rem;
            .left {
              // width: 70%;
              // flex-grow: 2;
            }
            .right {
              // flex-grow: 1;
            }
          }
        }
      }