Question

如您所见，我在卡中有一张图像，该图像的大小是固定的并且已知，但是卡文本长度可能会有所不同（太短或太长）。问题是我该如何防止卡的高度放大并迫使其保持高度以仅包含图像并迫使文本被包裹和缩短。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="container body-content">
	<div class="card text-center">
        <div class="card-header" style="text-align:right;font-weight:bold;font-size:large" dir="rtl">
            <p style="padding-right:20px;margin-bottom:0px">Post Header</p>
        </div>
        <div class="card-body" style="padding-top:0px;padding-bottom:0px;padding-right:0px">
            <div class="row">
                <div class="col-9">
                    <p style="padding-top:20px;padding-bottom:20px;text-align:right;white-space: normal;" dir="rtl" class="card-text">
                        This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long TextThis Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text
                    </p>
                </div>
                <div class="col-3">
                    <img class="img-fluid" src="http://fakeimg.pl/200/">
                </div>
            </div>
        </div>
	</div>
</div>

Answer 1

使用属性systemctl start Myapplication并动态设置div的高度可以解决此问题。将overflow:hidden和onresize="myFunction()"添加到您的身体标签中。

onload="myFunction()"

function myFunction()
{
	var a=document.getElementById("image").height;
	document.getElementById("test").style.height = a+"px";
}

希望这会有所帮助！

Answer 2

您可以设置固定高度，并使用overflow: hidden隐藏溢出的内容。为了使事情看起来更漂亮，我也淡出了最后几个字

.truncate-text {
  position: relative;
  height: 4.6em; /* height of 3 lines of text  */
  overflow: hidden;
}

.truncate-text::after {
  content: "";
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  width: 40%;
  height: 1.7em;
  position: absolute;
  bottom: 0;
  right: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="container body-content">
	<div class="card text-center">
        <div class="card-header" style="text-align:right;font-weight:bold;font-size:large" dir="rtl">
            <p style="padding-right:20px;margin-bottom:0px">Post Header</p>
        </div>
        <div class="card-body" style="padding-top:0px;padding-bottom:0px;padding-right:0px">
            <div class="row">
                <div class="col-9" style="padding-top:20px;padding-bottom:20px;text-align:right;white-space: normal;">
                    <div class="truncate-text">
                    <p dir="rtl" class="card-text">
                      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos sint consequatur quidem in blanditiis ab, eaque ad, ducimus quasi laboriosam corporis dolores vero. Tempore explicabo veritatis suscipit ratione ut voluptatem aut consectetur rem eaque cum fuga, sunt distinctio dolorem ducimus ipsum nihil nostrum? Iusto accusamus voluptate culpa vero! Libero saepe necessitatibus, ipsum aut dolores nihil voluptates recusandae. Quibusdam repellendus iste aperiam quas voluptates! Pariatur veritatis inventore debitis sed facere ratione aliquid iste libero nobis ea voluptatum harum delectus, laborum quisquam at aut necessitatibus consequatur explicabo ipsum odio, facilis cum iusto quam! Corrupti soluta amet eligendi labore odit asperiores vel aliquid?
                    </p>
                    </div>
                </div>
                <div class="col-3">
                    <img class="img-fluid" src="http://fakeimg.pl/200/">
                </div>
            </div>
        </div>
	</div>
</div>

卡文本较长时，防止按比例放大带有图像的引导卡

2 个答案: