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: hidden 改行を強制しない場合は、overflow を使用します。 hidden : インターフェースを越えてコンテンツを非表示にします

5: margin-bottom 無効

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;
 
}

読んでいただきありがとうございます、お役に立てれば幸いです 皆様、このサイトを応援していただきありがとうございます！

WeChat アプレット CSS 活用スキルまとめに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。