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;

<强>释：

overflow: hidden;：隐藏超出指定宽度的字符。
white-space: nowrap;：说浏览器不要将文本分成多行。
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>

Answer 2

我玩过你的代码。请尝试稍微检查一下，

<div class="container" style="text-overflow: ellipsis; width: 190px; white-space: nowrap; overflow: hidden;">
  <div style="text-overflow: ellipsis; width: 100%; white-space: nowrap; overflow: hidden;">
    <span>Some random text comes here</span>
    <a>postedByUserName</a>
  </div>
</div>

使用省略号

2 个答案: