Question

我正在尝试使用bootstrap 4在左侧显示一个小的配置文件图像，右侧显示名称和标题。有时标题很长，可以进入下一行。我的问题是下一行是图像的结尾而不是图像的中间。我已经看过一些在提琴手上工作的在线示例，但是当我将代码复制并粘贴到我的代码中时，它会中断。

任何人都可以告诉我我做错了什么。我想更多地了解这个理论，所以我没有这个问题。

我已经从php转换了这个，所以可能会有一些“或”遗留不应该存在并且行没有结束，因为有更多代码用于类似的第二方。

由于

<div class="row">
    <div class="cast-list col-6">
        <h2 class="text-center">Cast</h2>;
        <div class="row">;
            <div class="col-6">;
                <div>
                    <img class="img-responsive profilepic" src="//image.tmdb.org/t/p/w45">;
                    <span class="people profiletext"> . $person->name .  </span>;
                    <span class="people profiletext">  . $person->character . </span>
                </div>
            </div>;
        </div>;
    </div>





.people{
    padding-left: 10px;

}

.profilepic{

}

Answer 1

希望人名和角色排在一排。如果是，则使用以下代码：

<div class="d-flex align-items-center">
  <img class="img-responsive profilepic" src="//image.tmdb.org/t/p/w45">;
  <span class="people profiletext"> . $person->name .  </span>;
  <span class="people profiletext">  . $person->character . </span>
</div>

不要修理容器大小。由于这些值始终不相同。

如果附带更长的数据。然后容器将被扩展。为避免这种情况，您可以将其修复为静态宽度，并且必须使用省略号

CSS：

.yourclass{
text-overflow: ellipsis;
 white-space:no-wrap;
}

图片右侧有两行文字

1 个答案: