当卡片文本很长时，防止使用图像放大引导卡答案

【问题标题】：Prevent Scaling up bootstrap card with an image when card-text is long当卡片文本很长时，防止使用图像放大引导卡
【发布时间】：2018-07-04 16:57:32
【问题描述】：

如您所见，我在卡片内有一张图片，图片大小是固定的且已知的，但卡片文字长度可能会有所不同（短或过长）。问题是我怎样才能防止卡片高度放大并强制它保持高度只包含图像并强制文本被包装和缩短。

<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>

【问题讨论】：

你的意思是图片的高度适合文字高度吗？
@לבנימלכה 没有固定图像大小，卡片高度必须是适合图像而不是文本的值，现在如果文本太长，只需剪切文本而不放大以包含整个文本

标签： html css bootstrap-4

【解决方案1】：

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

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

<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>
<body onresize="myFunction()" onload="myFunction()">
<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;max-height:200px !important;">
            <div class="row">
                <div class="col-9" style="overflow:hidden;" id="test">
                    <p style="padding-top:20px;padding-bottom:20px;text-align:right;" 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/" id="image">
                </div>
            </div>
        </div>
	</div>
</div>
</body>

希望这会有所帮助！

【讨论】：

【解决方案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>

【讨论】：

无论屏幕大小如何，您的解决方案始终显示三行文本。显示的文字应根据图像的大小而变化。