WeChat 미니 프로그램의 CSS 사용 기술 요약

WeChat 미니 프로그램에서 CSS 사용 팁

1: 순수 CSS를 사용하여 삼각형을 만들고 위쪽, 왼쪽, 오른쪽을 숨깁니다(색상을 투명하게 설정)

.demo {
 
width: 0;
 
height: 0;
 
border-width: 20px;
 
border-style: solid;
 
border-color: transparent transparent red transparent;
 
}

2: 최대 높이를 설정합니다.. 초과하면 슬라이드 가능합니다

max-height: 550rpx;
 
overflow-y: scroll;

3: text-overflow 속성이 다음과 같은 경우에 발생하는 작업을 지정하는 경우 텍스트가 포함된 요소를 오버플로합니다

clip: 修剪文本
ellipsis : 用省略号来代表被修剪的文字
string: 使用给定的字符串来代表被修剪的文字
重点是三个同时使用：text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

4:overflow: hide 줄 바꿈을 강제로 적용하지 않는 경우 Overflow:hidden을 사용하여 인터페이스를 초과하는 부분을 숨깁니다

5: 여백 -하단 유효하지 않음

margin-bottom是下方的外边距，并不能让元素向下方移动，margin-top作为上边距，把元素“推”了下去。
希望图标距离下方30px，那么可以在ul上设置 position:absolute, bottom:30px ，(这一句我没有加同样实现了效果)另外父元素position:relative

6: 줄 바꿈 강제 금지

white-space:nowrap;

자동 줄 바꿈

div{
 
word-wrap: break-word;
 
word-break: normal;
 
}

영문 단어 강제 나누기

div{
 
word-break:break-all;
 
}

감사합니다 읽으면서 모든 분들께 도움이 되기를 바랍니다. 이 사이트 지원에 관심을 가져주셔서 감사합니다!

위챗 미니 프로그램 CSS 활용 스킬 요약 관련 글을 더 보시려면 PHP 중국어 홈페이지를 주목해주세요!