html - 使文本内容适合省略号

Question

我有和 HTML 容器一样

<div class="container">
  <p>
    <span>short text width random length comes here</span>
    <a>postedByUserName</a>
  </p>
</div>

容器必须是响应式的，这里有一个工作演示

var $input = $('.input input'),
$container = $('.container'),
$value = $('.value');
$value.text('Container width: ' + $input.val() + 'px');
$container.width($input.val()); 

$input.on('input', function(){
	$container.width($input.val());  
    $value.text('Container width: ' + $input.val() + 'px');
});

.main{
  width: 100%;
  height: 100%;
  background: bisque;
  padding: 5px;
}
.container {
  overflow: hidden;
  max-height: 80px;
  padding: 0;
}
  p {
    background: orange;
    max-width: 100%;
    max-height: 100%;
  }
    a {
      color: blue;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
  <div class="input">
  Min. 50px
    <input type="range" min="50" max="600" step="10" name="container_width">
    Max: 600px
    <br/>
    <div class="value"></div>
    <br/>
  </div>
  <div class="container">
    <p>
      <span>Some random text comes here</span>
      <a>postedByUserName</a>
    </p>
  </div>
</div>

如果将容器的宽度设置为 100px (可以使用范围输入)，您将看到带有用户名的链接元素不再可见。我怎样才能不把链接放在下一行，而是连续显示文本元素并用省略号显示用户名，只有当容器高度为 80 像素时才会发生这种情况，直到省略号不应用于文本。 div.container里面的模板是可以改的，但是用户名应该看起来像一个链接，应该是一个可点击的元素？我需要一个 CSS+HTML 解决方案。

Answer 1

将以下代码添加到您的p。

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

解释:

1. overflow: hidden; : 隐藏超出指定宽度的字符。
2. white-space: nowrap; :告诉浏览器不要将文本分成多行。
3. text-overflow: ellipsis; : 在文本溢出时创建省略号。

---

更新的代码段:

var $input = $('.input input'),
  $container = $('.container'),
  $value = $('.value');
$value.text('Container width: ' + $input.val() + 'px');
$container.width($input.val());

$input.on('input', function() {
  $container.width($input.val());
  $value.text('Container width: ' + $input.val() + 'px');
});

.main {
  width: 100%;
  height: 100%;
  background: bisque;
  padding: 5px;
}
.container {
  overflow: hidden;
  max-height: 80px;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
p {
  background: orange;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
  <div class="input">
    Min. 50px
    <input type="range" min="50" max="600" step="10" name="container_width">Max: 600px
    <br/>
    <div class="value"></div>
    <br/>
  </div>
  <div class="container">
    <p>
      <span>Some random text comes here</span>
      <a>postedByUserName</a>
    </p>
  </div>
</div>