如何在不扩大图块大小的情况下打破标题并显示椭圆？
[英]How do I get my title to break and show ellipses without expanding tile size?
问题描述
I am working on a responsive site that has tiles with titles and descriptions. 
我正在一个具有标题和描述磁贴的响应式网站上工作。 The issue i am having is when the screen size gets smaller the tiles get smaller and the title has less space. 我遇到的问题是，屏幕尺寸变小时，磁贴变小，标题空间变小。 When the size of the tile is hit and the text is supposed to get hidden and display an ellipses ... at the end. 按下图块的大小后，文本应该被隐藏起来，并在最后显示省略号...。 instead what happens is the text increases the size of the entire tile but the tile is getting higher than what it should be able to get to. 相反，发生的事情是文本增加了整个图块的大小，但是图块变得比应达到的高度高。 Any suggestions on how to get the title to not wrap and add the ellipse without increasing the tile size? 关于如何使标题不换行并添加椭圆而不增加图块大小的任何建议？
I included an image on the tile where I noticed the problem and then My CSS and HTML for this page. 我在图块上添加了一张图片，发现该问题，然后在此页面上添加了我的CSS和HTML。
/* Float four columns side by side (desktop view)*/ .column { position: relative; /* display: flex; */ padding: 10px 10px 20px 10px } @media (min-width: 668px) { .column { display: inline-flex; } .tile-card { width: 100%; min-width: 175px; } } @media (min-width: 1025px) { .tile-card { width: 100%; max-width: 425px; min-width: 175px; } } @media (max-width: 667px) { .column { display: block; } } .tile-card { background-color: #FFF; width: 100%; height: 230px; color: #fff; border-style: solid; border-color: #0006; border-width: 1px; border-radius: 5px; } .dash-title { background-color: #00A0D3; width: 100%; height: 14%; margin-bottom: 0px; text-align: left; border-style: solid; border-color: #00A0D3; border-width: 1px; border-radius: 5px 5px 0px 0px; padding-left: 20px; padding-right: 20px; padding-top: 8px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* .dash-title { background-color: #00A0D3; width: 100%; height: 25%; margin-bottom: 0px; text-align: left; border-style: solid; border-color: #00A0D3; border-width: 1px; border-radius: 5px 5px 0px 0px; padding-left: 20px; padding-top: 10px; font-weight: bold; } */ .dash-description { width: 70%; height: 65%; text-align: center; display: inline-block; float: left; color: #00384f; /* padding-top: 11px; */ } .tile-icon { display: inline-block; margin-left: auto; margin-right: auto; height: 65%; /* padding-top: 15px; */ float: left; flex-shrink: 0; flex-grow: 0; flex-basis: 100px; padding-left: 8px; } .flexContainer { display: flex; height: 75%; position: relative; } .report-type { /* display: none; */ display: inline-block; margin-right: 10px; width: 15px; height: 15px; float: right; margin-top: 150px; } .foot { background: #fff; border-top: 1px solid rgba(0, 0, 0, 0.1); color: #4d4d4d; padding-top: 40px; padding-bottom: 40px; text-align: center; width: 100%; float: left; /* position: relative; bottom: 0px; */ position: absolute; right: 0; bottom: 0; left: 0; } ul.linkTrail { padding: 10px 16px; list-style: none; background-color: #fff; } ul.linkTrail li { display: inline; font-size: 14px; } ul.linkTrail li+li:before { padding: 8px; color: black; content: "/\\00a0"; } ul.linkTrail li a { color: #0275d8; text-decoration: none; padding-right: 8px; } ul.linkTrail li a:hover { color: #01447e; text-decoration: underline; } * { box-sizing: border-box; margin: auto; font-family: "tahoma", Times, Serif; } /* Extra Large devices - 1025px and up will have 4 columns */ @media (min-width: 1025px) { .col-extraLarge-3 { float: left; width: 25%; } } /* Large devices - 992px to 1024px will have 3 columns */ @media (min-width: 992px) and (max-width: 1024px) { .col-large-4 { float: left; width: 33.33%; } } /* Medium devices - 668px to 991px will have 2 columns */ @media (min-width: 668px) and (max-width: 991px) { .col-medium-6 { float: left; width: 50%; } } /* Small devices - 667px and below will have 1 column */ @media (max-width: 667px) { .col-small-12 { float: left; width: 100%; } div.article, div.welcome { padding: 0px 0px 10px 0px; margin-top: -10px; } }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="TileTemplate.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> </head> <body> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Bookings Trend</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that displays trends for software & product bookings, deal counts, average selling prices and discounts over time.</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Detailed KPIs</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">High level views of the business and where we stand against weekly target for major indicators such as bookings, funnel, inflow and closed/lost.<br/> </div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Executive KPI Summary</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Companywide information and statistics dashboard with views of where we stand against weekly</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Funnel Inflow Trends</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that shows trends in funnel inflow over time.</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Funnel Trends</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that displays historical views of the funnel.<br/></div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Route To Market Bookings Trends<br/></div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that displays trends from a Route to Market perspective for software & product bookings, deal counts, average selling prices and discounts over time. This view includes both a hierarchical view (single-crediting) and overlay view (multi-crediting).</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Route To Market Funnel Trends</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that displays historical views from a Route to Market perspective of the funnel. Including opportunity count and average selling price. This view includes both a hierarchical view (single-crediting) and overlay view (multi-crediting).</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Weekly Forecast Call</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Detailed view of current quarter and next quarter deal rollup by region with field calls.<br/></div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> </div><br/> </body> </html><!DOCTYPE html> <html> <head> <link rel="stylesheet" href="TileTemplate.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> </head> <body> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Bookings Trend</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that displays trends for software & product bookings, deal counts, average selling prices and discounts over time.</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Detailed KPIs</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">High level views of the business and where we stand against weekly target for major indicators such as bookings, funnel, inflow and closed/lost.<br/> </div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Executive KPI Summary</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Companywide information and statistics dashboard with views of where we stand against weekly</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Funnel Inflow Trends</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that shows trends in funnel inflow over time.</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Funnel Trends</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that displays historical views of the funnel.<br/></div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Route To Market Bookings Trends<br/></div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that displays trends from a Route to Market perspective for software & product bookings, deal counts, average selling prices and discounts over time. This view includes both a hierarchical view (single-crediting) and overlay view (multi-crediting).</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Route To Market Funnel Trends</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that displays historical views from a Route to Market perspective of the funnel. Including opportunity count and average selling price. This view includes both a hierarchical view (single-crediting) and overlay view (multi-crediting).</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Weekly Forecast Call</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Detailed view of current quarter and next quarter deal rollup by region with field calls.<br/></div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> </div><br/> </body> </html>
2 个解决方案
解决方案1
1 2019-08-01 22:28:07
Here's an answer using a jQuery each method. 这是使用jQuery each方法的答案。 You can switch out the 70 to any value you want. 您可以将70切换为所需的任何值。
If you want to make this even more responsive, you can wrap this in a $(window).resize() function and check to see how wide the browser window is and then not even run this if it's in mobile or tablet. 如果要使其响应速度更快，可以将其包装在$(window).resize()函数中，并检查浏览器窗口的宽度，然后在移动设备或平板电脑中甚至不运行它。
// For each element with this class. $('.dash-description').each(function() { // Set a variable equal to the text of the element. var inner_text = $(this).text(); // Checks to see how long the original length is. If the text is shorter than the value of 70, then don't run this next part. if (inner_text.length > 70) { // Trims the lines from the text and then pulls the first 70 characters var new_text = $.trim(inner_text).substring(0, 70); // Swaps the original text with the new truncated text and adds the ellipses $(this).text(new_text + '...'); } });
/* Float four columns side by side (desktop view)*/ .column { position: relative; /* display: flex; */ padding: 10px 10px 20px 10px } @media (min-width: 668px) { .column { display: inline-flex; } .tile-card { width: 100%; min-width: 175px; } } @media (min-width: 1025px) { .tile-card { width: 100%; max-width: 425px; min-width: 175px; } } @media (max-width: 667px) { .column { display: block; } } .tile-card { background-color: #FFF; width: 100%; height: 230px; color: #fff; border-style: solid; border-color: #0006; border-width: 1px; border-radius: 5px; } .dash-title { background-color: #00A0D3; width: 100%; height: 14%; margin-bottom: 0px; text-align: left; border-style: solid; border-color: #00A0D3; border-width: 1px; border-radius: 5px 5px 0px 0px; padding-left: 20px; padding-right: 20px; padding-top: 8px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* .dash-title { background-color: #00A0D3; width: 100%; height: 25%; margin-bottom: 0px; text-align: left; border-style: solid; border-color: #00A0D3; border-width: 1px; border-radius: 5px 5px 0px 0px; padding-left: 20px; padding-top: 10px; font-weight: bold; } */ .dash-description { width: 70%; height: 65%; text-align: center; display: inline-block; float: left; color: #00384f; /* padding-top: 11px; */ } .tile-icon { display: inline-block; margin-left: auto; margin-right: auto; height: 65%; /* padding-top: 15px; */ float: left; flex-shrink: 0; flex-grow: 0; flex-basis: 100px; padding-left: 8px; } .flexContainer { display: flex; height: 75%; position: relative; } .report-type { /* display: none; */ display: inline-block; margin-right: 10px; width: 15px; height: 15px; float: right; margin-top: 150px; } .foot { background: #fff; border-top: 1px solid rgba(0, 0, 0, 0.1); color: #4d4d4d; padding-top: 40px; padding-bottom: 40px; text-align: center; width: 100%; float: left; /* position: relative; bottom: 0px; */ position: absolute; right: 0; bottom: 0; left: 0; } ul.linkTrail { padding: 10px 16px; list-style: none; background-color: #fff; } ul.linkTrail li { display: inline; font-size: 14px; } ul.linkTrail li+li:before { padding: 8px; color: black; content: "/\\00a0"; } ul.linkTrail li a { color: #0275d8; text-decoration: none; padding-right: 8px; } ul.linkTrail li a:hover { color: #01447e; text-decoration: underline; } * { box-sizing: border-box; margin: auto; font-family: "tahoma", Times, Serif; } /* Extra Large devices - 1025px and up will have 4 columns */ @media (min-width: 1025px) { .col-extraLarge-3 { float: left; width: 25%; } } /* Large devices - 992px to 1024px will have 3 columns */ @media (min-width: 992px) and (max-width: 1024px) { .col-large-4 { float: left; width: 33.33%; } } /* Medium devices - 668px to 991px will have 2 columns */ @media (min-width: 668px) and (max-width: 991px) { .col-medium-6 { float: left; width: 50%; } } /* Small devices - 667px and below will have 1 column */ @media (max-width: 667px) { .col-small-12 { float: left; width: 100%; } div.article, div.welcome { padding: 0px 0px 10px 0px; margin-top: -10px; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Bookings Trend</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that displays trends for software & product bookings, deal counts, average selling prices and discounts over time.</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Detailed KPIs</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">High level views of the business and where we stand against weekly target for major indicators such as bookings, funnel, inflow and closed/lost.</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Executive KPI Summary</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Companywide information and statistics dashboard with views of where we stand against weekly</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Funnel Inflow Trends</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that shows trends in funnel inflow over time.</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Funnel Trends</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that displays historical views of the funnel.</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Route To Market Bookings Trends<br/></div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that displays trends from a Route to Market perspective for software & product bookings, deal counts, average selling prices and discounts over time. This view includes both a hierarchical view (single-crediting) and overlay view (multi-crediting).</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Route To Market Funnel Trends</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that displays historical views from a Route to Market perspective of the funnel. Including opportunity count and average selling price. This view includes both a hierarchical view (single-crediting) and overlay view (multi-crediting).</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Weekly Forecast Call</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Detailed view of current quarter and next quarter deal rollup by region with field calls.<br/></div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div>
Here's the version with the resize event included: 这是包含resize事件的版本：
// New function. Arguments are the element and the window width. function wpso_08012019_truncate_text(element, window_width) { // Loop through the passed elements. element.each(function() { // Set a var for the element's text. var inner_text = $(this).text(); // Set a data attribute on the element with the original text. We'll need this later. $(this).attr('data-original', inner_text); // If the character count of the text is longer than this value (70), then do this next stuff. if (inner_text.length > 70) { // Set a new var with the text truncated to a set character count (70). var new_text = $.trim(inner_text).substring(0, 70); // Set the text of the element to the truncated text plus the ellipses $(this).text(new_text + '...'); } // If the window width is less than this, run this. if (window_width < 768) { // Set the text of the element to it's original text from the data-attribute we added earlier. Smart. $(this).text($(this).data('original')); } }); } $(window).resize(function() { // On resize set the var for the window width var window_width = $(window).width(); // Run the function on resize passing in the element and the window width. wpso_08012019_truncate_text($('.dash-description'), window_width) }); $(document).ready(function() { // Trigger the window resize event on document ready. $(window).trigger('resize'); });
/* Float four columns side by side (desktop view)*/ .column { position: relative; /* display: flex; */ padding: 10px 10px 20px 10px } @media (min-width: 668px) { .column { display: inline-flex; } .tile-card { width: 100%; min-width: 175px; } } @media (min-width: 1025px) { .tile-card { width: 100%; max-width: 425px; min-width: 175px; } } @media (max-width: 667px) { .column { display: block; } } .tile-card { background-color: #FFF; width: 100%; height: 230px; color: #fff; border-style: solid; border-color: #0006; border-width: 1px; border-radius: 5px; } .dash-title { background-color: #00A0D3; width: 100%; height: 14%; margin-bottom: 0px; text-align: left; border-style: solid; border-color: #00A0D3; border-width: 1px; border-radius: 5px 5px 0px 0px; padding-left: 20px; padding-right: 20px; padding-top: 8px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* .dash-title { background-color: #00A0D3; width: 100%; height: 25%; margin-bottom: 0px; text-align: left; border-style: solid; border-color: #00A0D3; border-width: 1px; border-radius: 5px 5px 0px 0px; padding-left: 20px; padding-top: 10px; font-weight: bold; } */ .dash-description { width: 70%; height: 65%; text-align: center; display: inline-block; float: left; color: #00384f; /* padding-top: 11px; */ } .tile-icon { display: inline-block; margin-left: auto; margin-right: auto; height: 65%; /* padding-top: 15px; */ float: left; flex-shrink: 0; flex-grow: 0; flex-basis: 100px; padding-left: 8px; } .flexContainer { display: flex; height: 75%; position: relative; } .report-type { /* display: none; */ display: inline-block; margin-right: 10px; width: 15px; height: 15px; float: right; margin-top: 150px; } .foot { background: #fff; border-top: 1px solid rgba(0, 0, 0, 0.1); color: #4d4d4d; padding-top: 40px; padding-bottom: 40px; text-align: center; width: 100%; float: left; /* position: relative; bottom: 0px; */ position: absolute; right: 0; bottom: 0; left: 0; } ul.linkTrail { padding: 10px 16px; list-style: none; background-color: #fff; } ul.linkTrail li { display: inline; font-size: 14px; } ul.linkTrail li+li:before { padding: 8px; color: black; content: "/\\00a0"; } ul.linkTrail li a { color: #0275d8; text-decoration: none; padding-right: 8px; } ul.linkTrail li a:hover { color: #01447e; text-decoration: underline; } * { box-sizing: border-box; margin: auto; font-family: "tahoma", Times, Serif; } /* Extra Large devices - 1025px and up will have 4 columns */ @media (min-width: 1025px) { .col-extraLarge-3 { float: left; width: 25%; } } /* Large devices - 992px to 1024px will have 3 columns */ @media (min-width: 992px) and (max-width: 1024px) { .col-large-4 { float: left; width: 33.33%; } } /* Medium devices - 668px to 991px will have 2 columns */ @media (min-width: 668px) and (max-width: 991px) { .col-medium-6 { float: left; width: 50%; } } /* Small devices - 667px and below will have 1 column */ @media (max-width: 667px) { .col-small-12 { float: left; width: 100%; } div.article, div.welcome { padding: 0px 0px 10px 0px; margin-top: -10px; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Bookings Trend</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that displays trends for software & product bookings, deal counts, average selling prices and discounts over time.</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Detailed KPIs</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">High level views of the business and where we stand against weekly target for major indicators such as bookings, funnel, inflow and closed/lost.<br /></div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Executive KPI Summary</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Companywide information and statistics dashboard with views of where we stand against weekly</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Funnel Inflow Trends</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that shows trends in funnel inflow over time.</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Funnel Trends</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that displays historical views of the funnel.<br /></div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Route To Market Bookings Trends<br /></div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that displays trends from a Route to Market perspective for software & product bookings, deal counts, average selling prices and discounts over time. This view includes both a hierarchical view (single-crediting) and overlay view (multi-crediting).</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Route To Market Funnel Trends</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Interactive dashboard that displays historical views from a Route to Market perspective of the funnel. Including opportunity count and average selling price. This view includes both a hierarchical view (single-crediting) and overlay view (multi-crediting).</div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div> <div class="column col-extraLarge-3 col-large-4 col-medium-6 col-small-12"> <a href="#" target="_blank"> <div class="tile-card"> <div class="dash-title">Weekly Forecast Call</div> <div class="flexContainer"> <img class="tile-icon" src="/sites/bic/PublishingImages/Legal.png" alt="" /> <div class="dash-description">Detailed view of current quarter and next quarter deal rollup by region with field calls.<br /></div> <img class="report-type" src="/sites/bic/PublishingImages/power-bi.png" alt="" /> </div> </div> </a> </div>
Here's the fiddle to play with the resize version: 这是使用调整大小版本的小提琴：
https://jsfiddle.net/disinfor/9fe3758p/12/ https://jsfiddle.net/disinfor/9fe3758p/12/
解决方案2
0 2019-08-01 17:49:20
I assume you need to have fixed height tile and if the length of content increases some defined length you need to show '...'? 我假设您需要固定高度的图块，并且如果内容的长度增加了某些定义的长度，则需要显示“ ...”？
It can be done with Javascript and If you're using Angular then you can use pipe which can be reused. 可以使用Javascript完成，如果您使用的是Angular，则可以使用可重复使用的管道。
Javascript approach Assume you're having your data in the array Javascript方法假设您将数据放入数组中
var data =[{des:'Lorem ipsum dolor sit amet, consectetur adipiscing elit'},{des:'Lorem ipsum dolor sit amet, consectetur adipiscing elit'}];
let requiredLength =45;
data.map(e=>e['des']=`${e['des'].substr(0,requiredLength)}...`);
Angular Approach 角度法
<div *ngFor="let item of data">{{item.des | substr:45}}</div>
Create angular pipe having name substr, which can be used in entire application 创建名称为substr的角管，可在整个应用程序中使用
@Pipe({
name: 'substr'
})
export class SubstrPipe implements PipeTransform {
transform(value: string:length:number) {
return `${value.substr(0, length)}...`;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
我如何在不扩展导航的情况下切换节目隐藏 - how can i toggle my show hide without my nav expanding
如何在流体宽度表中使用省略号而不使每列具有相同的大小？ - How can I use ellipses in a fluid width table without making each column the same size?
我如何设置我的网站图块（<title>等于 blog.title 吗？</div></title><div id="text_translate"><p> 好的，所以我正在制作一个小博客网站以供娱乐，我想知道如何设置页面的标题= blog.title（使用nodejs和express）这是我尝试过的，但它不起作用；（ .</p><pre> app.get('/blogs/:id', (req, res) => { const id = req.params.id; Blog.findById(id).then(result => { res.render('details', { blog: result, title: `Announcement details ${blog.title} ` }); }).catch(err => { console.log(err); }); });</pre><p> 有没有人有任何可能有效的方法？</p></div> - How can i set my site tile(<title> equal to blog.title?
如何使用css在悬停工具提示上使用与省略号相同的文本显示？ - How do I use css to show on hover tool-tips using the same text which is shortend with ellipses?
如何让我的页面标题有一个图标？ - How do I get my page title to have an icon?
如何以较小的窗口显示子菜单？ - How do i get the submenus to show with a small window size?
如何在标题框中获取所有内容并使标题居中（资源） - How do I get everything in my title box and center the Title (resources)
如何让我的字体显示在我的网站上？ - How do I get my font to show up on my WebSite?
如何格式化聊天应用程序以显示侧边栏的省略号，并在单击后保持每个 div 突出显示？ - How do I format chat app to show ellipses for the side bar, and keep each div highlighted after being clicked?
如何获得我的桌子图像大小相同？ - How do I get my table images to be the same size?
相关标签