如何使用省略号截断屏幕大小的文本

Question

我有这个Stackblitz 和Stackblitz Url，在带有列的页面布局内有 2 个引导卡。

问题 - 卡片的名称 (.card-title) 长度超过 11 个字符（最多 15 个），当我将屏幕缩小到 768px-1200px 之间时，顶部的名称该卡将星级/评级压缩到下一行。

问题 - 有没有办法用椭圆截断 768px-1200px 之间的名称（例如 AnneMariesPlace），以便星级/评级保持在同一条线上？ 前任。安妮玛丽... 这意味着最大长度为 8 加上省略号（3 个字符）

可以用纯 CSS 来完成吗？ 仅供参考 - 我用文本溢出尝试了几件事：省略号；和空白：nowrap； 但我运气不太好。

这是我正在使用的代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container my-3 my-xl-5">
  <div class="row">
    <div class="col-lg-3">
      something here
    </div>

    <div class="col-lg-9">
      <div class="row">
        <div class="col">
          <div class="mb-4">
          </div>

          <div class="row row-cols-1 row-cols-sm-2">
            <div class="col mb-4">
              <div class="card">
                <div class="row no-gutters">
                  <div class="col-md-5">
                    <img class="yogaband-img img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_1450,h_1450/f_auto/v1569538700/mainpage/iStock-860080282_bkhfsu.jpg" alt="yogaband">
                  </div>

                  <div class="col-md-7">
                    <div class="card-body py-1">
                      <div class="row">
                        <div class="col-12">
                          <b class="card-title d-inline">AnneMariesPlace</b>
                          <span class="float-right center-star">
                          &#9733;3.43
                        </span>
                        </div>
                      </div>

                      <div class="row">
                        <div class="col-12">
                          <span>Access</span>
                          <span class="float-right">Private</span>
                        </div>
                        <div class="col-12">
                          <span>Max Size</span>
                          <span class="float-right">10</span>
                        </div>
                        <div class="col-12">
                          <span>Events</span>
                          <span class="float-right">323</span>
                        </div>
                        <div class="col-12">
                          <span>Type</span>
                          <span class="float-right">Park</span>
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col mb-4">
              <div class="card">
                <div class="row no-gutters">
                  <div class="col-md-5">
                    <img class="yogaband-img img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_1450,h_1450/f_auto/v1569538700/mainpage/iStock-860080282_bkhfsu.jpg" alt="yogaband">
                  </div>
                  <div class="col-md-7">
                    <div class="card-body py-1">
                      <div class="row">
                        <div class="col-12">
                          <b class="card-title d-inline">AnneiMaries</b>
                          <span class="float-right center-star">
                          &#9733;3.43
                        </span>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-12">
                          <span>Access</span>
                          <span class="float-right">Private</span>
                        </div>
                        <div class="col-12">
                          <span>Max Size</span>
                          <span class="float-right">10</span>
                        </div>
                        <div class="col-12">
                          <span>Events</span>
                          <span class="float-right">323</span>
                        </div>
                        <div class="col-12">
                          <span>Type</span>
                          <span class="float-right">Park</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

要使省略号起作用，您需要条件。首先，元素不能是inline。你的它甚至有一个!important 条件（我不知道你为什么设置它），其次它需要一个width 设置（不管是百分比还是固定），最后，它需要overflow:hidden 和white-space:nowrap（因此内容永远不会占用第二行）。

基本上，根据你的例子，你需要这个：

.d-inline {
    display: inline-block;
    overflow: hidden;
    width: calc(100% - 44px);
    white-space: nowrap;
}

不幸的是，您的“分数”似乎永远不会获得超过 44 像素的宽度空间。多用一点以防万一（浏览器缩放等）。