表格行数据的动态缩略图答案

【问题标题】：dynamic thumbnail of table row data表格行数据的动态缩略图
【发布时间】：2019-05-06 16:57:12
【问题描述】：

我想知道如何从表格的行中制作徽标的动态缩略图，如下图所示？

我正在使用下面的代码：

.numberCircle {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 8px;
  background: #ddd;
  border: 2px solid #666;
  color: white;
  text-align: center;
  font: 16px Arial, sans-serif;
}

<?php 
    $words = preg_split("/\s+/", "Unnamed Template",2);
    
    	foreach ($words as $w) {
    	  
    	  $acronym .= $w[0];
    	  
    	}
    ?>
<div class="numberCircle">
  <?php echo $acronym;?>
</div>

我正在使用 PHP、HTML 和 Bootstrap 进行 Web 开发。有没有这样的包/工具？

谢谢。

【问题讨论】：

您使用的是哪个 PHP 框架/CMS？还是原始 PHP？
我在 Bootstrap 中使用原始 PHP

标签： php html css twitter-bootstrap bootstrap-4

【解决方案1】：

您可以使用 JS 和 jQuery 来代替。不要忘记添加 jQuery 库。

<div class="numberCircle"></div>
<p class="content">Lorem Ipsum Dormitor</p>

<script>
    var text = $('.content').text().split(" ");
    var cap = [];
    for (let i = 0; i < 2; i++) {
        var getCap = text[i].charAt(0);
        cap.push(getCap)
    }

    $('.numberCircle').text(cap[0] + cap[1])
</script>

【讨论】：

【解决方案2】：

你可以试试bootstrap的媒体组件

<div class="media">
   <img src="..." class="mr-3" alt="...">
    <div class="media-body">
       <h5 class="mt-0">Media heading</h5>
       Cras sit amet nibh libero.
    </div>
</div>

这是一个演示：http://jsfiddle.net/n2javtos/

【讨论】：

感谢您的回答。我想知道有没有什么方法可以得到头像符号（UT）而不是我们输入它？