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

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

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

word-wrap: break-word

属性。

你可以试试：

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

#myDiv {
    overflow:hidden;
}

请查看docs中的overflow属性以获取更多信息。

您可以使用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

您可以使用CSS进行控制，有几种选择：

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

希望能帮助到你。

只需使用以下命令：

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 */

还有另一个CSS属性：

white-space : normal;

空格属性控制如何在应用于文本的元素上处理文本。

div {

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

}

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

.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/

overflow: scroll？或自动。在样式属性中。

我想您应该从w3的基础开始

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

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

如果您的div在css中具有设置的高度，这将导致其在div之外溢出。

如果需要始终将div的最小高度设为最小高度，则可以给div设置最小高度。

最小高度不能在IE6中使用，如果您有特定于IE6的样式表，则可以为IE6指定一个常规高度。IE6中的高度根据其中的内容而变化。

您可以只在CSS中设置最小宽度，例如：

.someClass{min-width: 980px;}

它不会中断，但是您仍然可以使用滚动条来处理。

关于如何捕获导致问题的CSS的建议：

1）设置style="height:auto;"所有<div>元素，然后重试。

2）设置style="border: 3px solid red;"所有<div>元素，以查看您<div>的盒子占据了多大的面积。

3）height:#px;从CSS中删除所有css 属性，然后重新开始。

因此，例如：

<div id="I" style="height:auto;border: 3px solid red;">I
    <div id="A" style="height:auto;border: 3px solid purple;">A
        <div id="1A" style="height:auto;border: 3px solid green;">1A
        </div>
        <div id="2A" style="height:auto;border: 3px solid green;">2A
        </div>
    </div>
    <div id="B" style="height:auto;border: 3px solid purple;">B
        <div id="1B" style="height:auto;border: 3px solid green;">1B
        </div>
        <div id="2B" style="height:auto;border: 3px solid green;">2B
        </div>
    </div>
</div>

.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}

<div class="NonOverflow">
    Long Text
</div>

!! 硬编码的陷阱！根据周围的代码和屏幕分辨率，这可能导致不同的/不想要的行为

如果隐藏的溢出是不可能的，并且需要正确的连字符，则可以在希望单词/文本中断的地方使用软连字符HTML实体。这样，您就可以手动确定断点。

­

仅当单词需要打断以使其周围的容器不溢出时，才会出现连字符。

例：

<div class="container">
  foo&shy;bar
</div>

如果容器足够宽且文本不会溢出容器，则结果为：

foobar

如果容器很小，则结果为文本实际上会溢出容器：

foo-
bar

.container{
  background-color: green;
  max-width: 30px;
}

Example 1 - container to small => text overflows container:

<div class="container">
  foobar
</div>

Example 2 - using soft hyphen => text breaks at predetermined break point:

<div class="container">
  foo&shy;bar
</div>

Example 3 - using soft hyphen => text still overflowing because the text before the soft hyphen is to long:

<div class="container">
  foobar&shy;foo
</div>

更多信息：https : //en.wikipedia.org/wiki/Soft_hyphen