html如何超出让多余文字显示... 而不换行

在HTML中，如果你希望文本在达到容器边界时不换行，而是显示省略号（…），你可以使用CSS的text-overflow属性配合overflow和white-space属性来实现这一效果。下面是一个简单的示例：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Text Overflow Example</title>  
<style>  
  .container {  
    width: 200px; /* 设置容器的宽度 */  
    white-space: nowrap; /* 防止文本换行 */  
    overflow: hidden; /* 隐藏超出容器的文本 */  
    text-overflow: ellipsis; /* 在文本溢出时显示省略号 */  
    border: 1px solid #000; /* 可选的，为了更清楚地看到效果 */  
  }  
</style>  
</head>  
<body>  
  
<div class="container">  
  这是一段很长的文本，当它的宽度超出容器的宽度时，将显示省略号而不是换行。  
</div>  
  
</body>  
</html>

在这个示例中，.container类定义了一个宽度为200px的容器。white-space: nowrap;确保文本不会换行。overflow: hidden;隐藏了超出容器宽度的文本，而text-overflow: ellipsis;则会在文本溢出时显示省略号。

这种方法适用于单行文本的溢出处理。如果你有多行文本并希望每行在溢出时都显示省略号，那将需要更复杂的方法，可能涉及到JavaScript或使用WebKit特有的CSS扩展。

文章版权归作者所有，未经允许请勿转载。

THE END