搜索
  • CSS如何解决文字超出div宽度的问题？
  • 发布于 2个月前
  • 494 热度
    0 评论

前言：

文本溢出是指在元素中插入的文本量超过了该元素所设置的宽度或高度，从而导致文本溢出该元素的边界。在CSS中，文本溢出是一个常见的问题，尤其是在响应式设计中。当元素内容太大，而无法适应给定的尺寸时，就会发生文本溢出现象。


解决文本溢出的方法

在我们的工作中，为了保证设计的美观性，我们经常要处理文本内容超出容器范围的问题，常用的处理方式有：简单的裁剪，隐藏，隐藏并省略号显示，使用滚动条，示例代码如下： 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>堆代码 duidaima.com</title>
  <style>
  div.elli{
border:1px solid;
overflow:hidden; /*超出部分隐藏*/
white-space:nowrap;/*强制在一行显示*/
text-overflow:ellipsis;
width:200px;
height:20px;
}
  div.clip
{
border:1px solid;
overflow:hidden; /*超出部分隐藏*/
white-space:nowrap;/*强制在一行显示*/
text-overflow:clip;
width:200px;
height:20px;
}
div.hide
{
   overflow:hidden;
   border:1px solid;
   width:200px;
   height:50px;
}
div.scroll
{
   overflow:scroll;
   border:1px solid;
   width:200px;
   height:50px;
}

  </style>
 </head>
 <body>
  <div class="clip">如果此处的文字较多，将自动裁切裁切裁切裁切</div>
  <br>
  <div class="elli"><a href="#">如果此处的文字较多，将自动用省略号代替！</a></div>
  <br>
  <div class="hide">如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！</div>
  <br>
  <div class="scroll">如果此处的文字较多，将出现滚动条！如果此处的文字较多，将出现滚动条！如果此处的文字较多，将出现滚动条！</div>
 </body>

</html>

用户评论
可能感兴趣的话题