![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/05\/20250521093823-682d9f0fc3967.jpg\")
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/05\/20250521093823-682d9f0fd74cc.jpg\")
<\/p>\n <\/p>\n
<template>
\n<!– \u6700\u5916\u5c42\u5f39\u6027\u76d2\u5b50 –>
\n<div class="box" :style="boxStyle">
\n<!– \u6587\u672c\u533a\u57df，\u52a8\u6001\u7c7b\u540d\u63a7\u5236\u5c55\u5f00\/\u6536\u8d77\u72b6\u6001 –>
\n<div ref="textRef" :class="['text-cont', btnFlag ? 'text-unfold' : 'text-collapse']">
\n<!– \u5c55\u5f00\/\u6536\u8d77\u6309\u94ae –>
\n<div class="unfold-and-collapse" @click="btnFlagChange">
\n{{ btnFlag ? '\u6536\u8d77' : '\u5c55\u5f00' }}
\n<\/div>
\n<!– \u6587\u672c\u5185\u5bb9（\u4fdd\u7559\u9996\u884c\u7f29\u8fdb） –>
\n  {{ text }}
\n<\/div>
\n<\/div>
\n<\/template><\/p>\n
<script>
\nexport default {
\nname: 'ExpandableText',
\nprops: {
\ntext: {
\ntype: String,
\ndefault: ''
\n},
\nboxStyle: {
\ntype: String,
\ndefault: ''
\n}
\n},
\ndata() {
\nreturn {
\n\/\/ \u5c55\u5f00\u6536\u8d77\u72b6\u6001
\nbtnFlag: false
\n}
\n},
\nmethods: {
\n\/\/ \u5207\u6362\u5c55\u5f00\/\u6536\u8d77\u72b6\u6001
\nbtnFlagChange() {
\nthis.btnFlag = !this.btnFlag
\n}
\n}
\n}
\n<\/script><\/p>\n
<style scoped>
\n\/* \u6700\u5916\u5c42\u5f00\u542f\u5f39\u6027\u76d2\u5b50，\u7528\u4e8e\u4f2a\u5143\u7d20\u7684\u9ad8\u5ea6\u8ba1\u7b97 *\/
\n.box {
\ndisplay: flex;
\n}<\/p>\n
\/* \u6587\u672c\u533a\u57df\u8bbe\u7f6e\u5bbd\u5ea6，\u663e\u793a\u7701\u7565\u53f7 *\/
\n.text-cont {
\nwidth: 100%;
\nmargin: 0px auto 0;
\ndisplay: -webkit-box;
\n\/* \u5fc5\u987b\u7ed3\u5408\u7684\u5c5e\u6027，\u8bbe\u7f6e\u6216\u68c0\u7d22\u4f38\u7f29\u76d2\u5bf9\u8c61\u7684\u5b50\u5143\u7d20\u7684\u6392\u5217\u65b9\u5f0f *\/
\n-webkit-box-orient: vertical;
\n\/* \u6ea2\u51fa\u90e8\u5206\u9690\u85cf *\/
\noverflow: hidden;
\n\/* \u6587\u5b57\u5c45\u5de6 *\/
\ntext-align: left;<\/p>\n
font-family: PingFangSC, PingFang SC;
\nfont-weight: 500;
\nfont-size: 26rpx;
\ncolor: #000000;
\nline-height: 44rpx;
\nfont-style: normal;
\n}<\/p>\n
\/* \u5c55\u5f00\u72b6\u6001 – \u663e\u793a\u6240\u6709\u884c *\/
\n.text-unfold {
\n-webkit-line-clamp: 9999;
\n}<\/p>\n
\/* \u6536\u8d77\u72b6\u6001 – \u53ea\u663e\u793a3\u884c *\/
\n.text-collapse {
\n-webkit-line-clamp: 3;
\n}<\/p>\n
\/* \u5c55\u5f00\/\u6536\u8d77\u6309\u94ae\u6837\u5f0f *\/
\n.unfold-and-collapse {
\ncolor: #19aaff;
\nfloat: right;
\nclear: both;
\nmargin-right: 10px;
\ncursor: pointer;
\nfont-size: 26rpx;
\nline-height: 44rpx;
\nmargin-top: -6rpx;
\n}<\/p>\n
\/* \u4f2a\u5143\u7d20\u7528\u4e8e\u5b9e\u73b0\u6587\u5b57\u5305\u88f9\u6309\u94ae *\/
\n.text-cont::before {
\ncontent: "";
\nfloat: right;
\nwidth: 0;
\nheight: calc(100% – 20px);
\n}
\n<\/style><\/p>\n","protected":false},"excerpt":{"rendered":"
\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb374\u6b21\u3002\u672c\u6587\u4ecb\u7ecd\u4e86\u4e00\u4e2a\u57fa\u4e8eVue.js\u7684\u53ef\u5c55\u5f00\/\u6536\u8d77\u6587\u672c\u7ec4\u4ef6ExpandableText\u3002\u8be5\u7ec4\u4ef6\u901a\u8fc7\u52a8\u6001\u7c7b\u540d\u63a7\u5236\u6587\u672c\u7684\u5c55\u5f00\u548c\u6536\u8d77\u72b6\u6001\uff0c\u9ed8\u8ba4\u663e\u793a3\u884c\u6587\u672c\uff0c\u70b9\u51fb\u201c\u5c55\u5f00\u201d\u6309\u94ae\u53ef\u663e\u793a\u5168\u90e8\u5185\u5bb9\uff0c\u70b9\u51fb\u201c\u6536\u8d77\u201d\u6309\u94ae\u5219\u6062\u590d\u4e3a3\u884c\u3002\u7ec4\u4ef6\u7684\u4e3b\u8981\u529f\u80fd\u5305\u62ec\uff1a\u901a\u8fc7btnFlag\u72b6\u6001\u53d8\u91cf\u63a7\u5236\u6587\u672c\u7684\u5c55\u5f00\u4e0e\u6536\u8d77\uff0c\u4f7f\u7528-webkit-line-clamp\u5c5e\u6027\u5b9e\u73b0\u6587\u672c\u884c\u6570\u9650\u5236\uff0c\u5e76\u901a\u8fc7\u4f2a\u5143\u7d20\u5b9e\u73b0\u6309\u94ae\u4e0e\u6587\u672c\u7684\u5e03\u5c40\u3002\u7ec4\u4ef6\u7684\u6837\u5f0f\u901a\u8fc7boxStyle\u5c5e\u6027\u8fdb\u884c\u81ea\u5b9a\u4e49\uff0c\u9002\u7528\u4e8e\u9700\u8981\u52a8\u6001\u5c55\u793a\u957f\u6587\u672c\u7684\u573a\u666f\u3002_uniapp css \u5b9e\u73b0\u8fc7\u6e21\u5c55\u5f00\u6536\u8d77<\/p>\n","protected":false},"author":2,"featured_media":38930,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[573,387,556],"topic":[],"class_list":["post-38932","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-css","tag-uni-app","tag-556"],"yoast_head":"\n