Question

您好我有以下问题见图： https://i.stack.imgur.com/1o1ld.jpg

我如何管理大小适合文本？代码如下所示：

<div class="panel panel-default">
<div class="panel-heading">
<strong>Anonym</strong>&nbsp
<a href="#"><span class="glyphicon glyphicon-ok-circle"></span></a>&nbsp
<!--<a href="#"><span class="glyphicon glyphicon-pencil"></span></a>&nbsp-->
<a href="#"><span class="glyphicon glyphicon-trash"></span></a>
</div>
<div class="panel-body">
<p><?php echo $Question;?></p>
</div><!-- /panel-body -->
</div><!-- /panel panel-default -->
<?php } ?>
<!--Hier neues Element Einfügen/Ende -->
</div><!-- /col-sm-6 -->
<div class="col-sm-6">

感谢您提供一些解决方案:)

CSS看起来像这样：

.panel {
    position:relative;
}
.panel>.panel-heading:after,.panel>.panel-heading:before{
    position:absolute;
    top:11px;left:-16px;
    right:100%;
    width:0;
    height:0;
    display:block;
    content:" ";
    border-color:transparent;
    border-style:solid solid outset;
    pointer-events:none;
}
.panel>.panel-heading:after{
    border-width:7px;
    border-right-color:#f7f7f7;
    margin-top:1px;
    margin-left:2px;
}
.panel>.panel-heading:before{
    border-right-color:#ddd;
    border-width:8px;
}

Answer 1

p {
  overflow-wrap: break-word;
}

它允许长单词（每个单词中有一个单词）打破

自动高版Panel-Body with text

1 个答案: