Question

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

Answer 1

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

word-wrap: break-word

属性。

Answer 2

您可以尝试：

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

#myDiv {
    overflow:hidden;
}

查看the docs for the overflow property了解详情。

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控制它，有几个选项：

隐藏 - ＆gt;所有文本溢出都将被隐藏。
可见 - ＆gt;让文字溢出可见。
滚动 - ＆gt;如果文本溢出则放置滚动条

希望它有所帮助。

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？或者自动。在style属性中。

Answer 9

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

.someClass{min-width: 980px;}

它不会破坏，但你仍然会有滚动条来处理。

Answer 10

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

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

var wavesurfer = WaveSurfer.create({
     container: '#waveform'
});

wavesurfer.load('http://audiospectrum.bjitgroup.com/mp3/firefox.mp3');
wavesurfer.on('ready', function () {
    wavesurfer.play();
});

Answer 11

现在是css属性：

word-break: break-all

Answer 12

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

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

Answer 13

如果你的div在css中有一个设置高度，会导致它在div之外溢出。

如果你需要在div上始终保持最小高度，你可以给div一个最小高度。

最小高度在IE6中不起作用，如果你有一个IE6特定的样式表，你可以给它一个IE6的常规高度。 IE6中的高度根据其中的内容而变化。

Answer 14

有关如何捕获CSS的哪个部分导致问题的建议：

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

2）在所有style="border: 3px solid red;"元素上设置<div>，以查看<div>框所占用的区域的宽度。

3）从CSS中取走所有css height:#px;属性并重新开始。

例如：

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

Answer 15

!! 硬编码将被淘汰！取决于周围的代码和屏幕分辨率，这可能导致不同的/不必要的行为

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

&shy;

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

示例：

<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

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

15 个答案: