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

Posted 2023-03-21

【中文标题】如何使用省略号截断屏幕大小的文本

【英文标题】：How to truncate text with screen size using ellipses

【发布时间】：2021-12-23 10:22:39

【问题描述】：

我有这个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" >
                  </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" >
                  </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>

【问题讨论】：

text-overflow: ellipses; 这样做。 link

我试过了。简单地在文本溢出中放置一个省略号不会做任何事情。

圣洁divitis，蝙蝠侠！

我同意。这个页面是前段时间建立的，我没有时间回去重构。另外，它刚刚被扔进了 Stackblitz 中，以展示我正在尝试做的事情以及我目前拥有的东西

解决方案不会出现在您的问题中。拥有您代表的用户应该知道这一点。请发布正确的答案并接受它。

【参考方案1】：

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

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

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

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

【讨论】：

像这样与core Bootstrap utilities 搞混是一个真的坏主意。如果有的话，创建一个新类，但最好只使用正确的类。

我是前端。我讨厌助推器。如果可以的话，我会用核弹引导总部。在一个大项目中，我可以只使用 1000 行 css 行和 100 行 javascript 行并替换所有引导程序……同时使 Web 看起来像客户想要的那样（营销代理设计……遗憾的是通常不是我的）。我也讨厌 SCSS、Sass 和其他人，但我不能抱怨太多......没有太多的武器反对，但也许，也许......懒惰学习（我知道这应该是必须的.​​.....但超过 50 和累了）。

所以......你不能改变你的答案，这样它就不会与定义明确的第三方类混淆？不要误会我的意思；在第三方平台无人居住的完美原始土地上，您可以享受到更多的力量，但世界其他地方却可以。

这是我为解决现有问题所做的强制解决方法，我制作了 2 个不同的元素，其中一个具有截断的文本，另一个具有完整的文本，它们在显示尺寸上隐藏。我将在上面发布我的解决方案作为编辑

看来你走错职业了。对于我们这些真正喜欢我们工作的人来说，那些你非常讨厌的东西是很棒的工具（在适当的情况下）。 （FWIW，我快 50 岁了。）