时间戳

首页 > 解决方案 > 具有动态宽度/没有宽度的 CSS 省略号

html - 具有动态宽度/没有宽度的 CSS 省略号

问题描述

div.title我想使用CSS 省略号来适应lorem ipsum(...)页面，但我想在许多分辨率上使用它，所以我不能以像素为单位对宽度进行硬编码。

首先，我已经看到了类似问题的答案，但不幸的是，它对我的​​情况没有帮助。我为看似简单的问题而苦苦挣扎。我有一个标题，里面有几个框，一个标题可能（但不必）很长。我很确定我需要在text-overflow: ellipsis;这里使用。问题是因为我需要处理很多分辨率，从 HD 到 4K 最低。有没有比media-queries为每个分辨率设置更好的主意？我想设置一个width/max-width，不要担心 this 的兄弟姐妹div.title，只需获得可用宽度而不会压碎整个标题。我的情况：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

section {
  display: flex;
  align-items: flex-start;
}

.header {
  display: flex;
  background-color: #ccc;
}

.left, .right {
  display: flex;
}

.title {
  background-color: lightcoral;
  color: white;
  font-size: 40px;
}

.title span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.c-1, .c-2, .c-3 {
  height: 65px;
}

.c-1 {
  background-color: tomato;
  width: 65px;
}

.c-2 {
  background-color: darkblue;
  width: 300px;
}

.c-3 {
  background-color: yellow;
  width: 840px;
}
<section>
  <header class="header">
    <div class="c-1"></div>
    <div class="left">
      <div class="c-2"></div>
      <div class="title">
        <span>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae corporis unde, iure aperiam nobis odit possimus distinctio veritatis aspernatur adipisci nam velit dicta minima quod soluta rem deleniti tempore libero?
        </span>
      </div>
    </div>
    <div class="right">
      <div class="c-3"></div>
    </div>
  </header>
</section>

标签： htmlcss

解决方案

推荐阅读