<!--색상정보--> <div class="info_color"> <span class="info_data"> 색상 구성 : {$oDocument->getExtraValueHTML(5)} </span> <span class="btn-moreInfo">[색상 더보기]</span> </div> <style> .info_color{overflow:hidden;} .info_color .info_data.hidden{ white-space:nowrap; word-wrap:normal; width:90%; overflow:hidden; text-overflow: ellipsis; float:left; } .btn-moreInfo{display:none;white-space:nowrap;float:right;} @media screen and (max-width: 533px){ .info_color .info_data.hidden{ width:75%; } } </style> <script> jQuery(function ($) { var colorbox = $('.info_color .info_data'); colorbox.each( function() { $( this ).outerHeight(); if( $(this).outerHeight() > 21 ){ $(this).addClass('hidden'); var btnMoreCmt = $(this).siblings('.btn-moreInfo'); btnMoreCmt.show(); btnMoreCmt.on("click",function(){ $(this).siblings('.info_data').removeClass('hidden'); $(this).remove(); }); } } ); }); </script>
시간 나면 애드온으로도 만들겠지만 먼저 소스부터 공유합니다.
댓글이나 기타 정보가 2줄 이상일 경우 한줄로 하고, 더보기 버튼을 보여줬다가 클릭하면 나타나는 소스입니다.