> 위챗 애플릿 > 미니 프로그램 개발 > WeChat 미니 프로그램의 CSS 사용 기술 요약

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

高洛峰
풀어 주다: 2017-01-10 10:27:54
원래의
1461명이 탐색했습니다.

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 중국어 홈페이지를 주목해주세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿