我可以阻止div块中的文本溢出吗？

Question

我可以阻止div块中的文本溢出吗？

Answer 1

如果您希望div中的溢出文本自动换行而不是隐藏或制作滚动条,请使用

word-wrap: break-word

属性.

Answer 2

你可以试试:

<div id="myDiv">
    stuff 
</div>

#myDiv {
    overflow:hidden;
}

有关更多信息,请查看overflow属性的文档.

Answer 3

您可以使用CSS属性text-overflow截断长文本.

<div id="greetings">
  Hello universe!
</div>

#greetings
{
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; // This is where the magic happens
}

参考:http: //makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

Answer 4

你可以用CSS控制它,有几个选项:

• 隐藏 - >所有文本溢出都将被隐藏.
• 可见 - >让文本溢出可见.
• 滚动 - >如果文本溢出则放置滚动条

希望能帮助到你.

Answer 5

还有另一个css属性:

white-space : normal;

white-space属性控制如何在应用它的元素上处理文本.

div {

  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 

}

Answer 6

只需使用:

white-space: pre-wrap;      /* CSS3 */   
white-space: -moz-pre-wrap; /* Firefox */    
white-space: -pre-wrap;     /* Opera <7 */   
white-space: -o-pre-wrap;   /* Opera 7 */    
word-wrap: break-word;      /* IE */

Answer 7

尝试添加此类以解决问题：

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

在此链接中进一步解释http://css-tricks.com/almanac/properties/t/text-overflow/

Answer 8

overflow: scroll？或汽车。在样式属性中。

Answer 9

我想你应该从 w3 的基础知识开始

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 10

现在是 css 属性：

word-break: break-all