blocks|key|1421623|text|我有点惊讶它没有做到这一点。div中是否有另一个元素的宽度设置为大于250？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1421624|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I'm a little surprised it doesn't just do that. Could there another element inside the div that has a width set to something greater than 250?

blocks|key|1636580|text|只设置width和float+css属性将得到一个包装面板。下面的例子运行得很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1636581|<div+style="float:left;+width:+250px">
Pellentesque+feugiat+tempor+elit.+Ut+mollis+lacinia+quam.+
Sed+pharetra,+augue+aliquam+++ornare+vestibulum,+metus+massa
laoreet+tellus,+eget+iaculis+lacus+ipsum+et+diam.+
</div>|code-block|syntax|javascript|1636582|也许还有其他样式可以修改外观？|1636583|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Setting just the width and float css properties would get a wrapping panel.
The folowing example work just fine:

<pre><code>&lt;div style="float:left; width: 250px"&gt;
Pellentesque feugiat tempor elit. Ut mollis lacinia quam. 
Sed pharetra, augue aliquam ornare vestibulum, metus massa
laoreet tellus, eget iaculis lacus ipsum et diam. 
&lt;/div&gt;
</code></pre>

Maybe there are other styles in place that modify the appearance?

blocks|key|1421720|text|正如Andrew所说，你的文本应该做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1421721|我可以想到一个实例，它将按照您建议的方式运行，那就是如果您设置了空白属性。|1421722|看看你的CSS中是否有以下内容：|1421723|white-space:+nowrap|code-block|syntax|javascript|1421724|这将导致文本在同一行上继续，直到被换行符中断。|1421725|好的，我很抱歉，不确定之后是否编辑或添加了标记(一开始没有看到)。|1421726|overflow-x属性是导致滚动条出现的原因。去掉它，div就会调整到包含所有文本所需的高度。|1421727|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

As Andrew said, your text should be doing just that.

There is one instance that I can think of that will behave in the manner you suggest, and that is if you have the whitespace property set.

See if you don't have the following in your CSS somewhere:

<pre><code>white-space: nowrap
</code></pre>

That will cause text to continue on the same line until interrupted by a line break.

OK, my apologies, not sure if edited or added the mark-up afterwards (didn't see it at first).

The overflow-x property is what's causing the scroll bar to appear. Remove that and the div will adjust to as high as it needs to be to contain all your text.

blocks|key|1636715|text|在看不到呈现的html的样子以及应用于treeview+div中的元素的样式的情况下，很难明确地说出来，但我马上想到的是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1636716|overflow-x:+scroll;|code-block|syntax|javascript|1636717|如果删除它会发生什么？|1636718|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

It's pretty hard to say definitively without seeing what the rendered html looks like and what styles are being applied to the elements within the treeview div, but the thing that jumps out at me right away is the 

<pre><code>overflow-x: scroll;
</code></pre>

What happens if you remove that?

blocks|key|1421826|text|您可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1421827|overflow-x:+auto;+|code-block|syntax|javascript|1421828|如果您在overflow-x中设置了'auto‘，则只有当内部尺寸最大DIV区域时才会出现滚动|1421829|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

you can use:

<pre><code>overflow-x: auto; 
</code></pre>

If you set 'auto' in overflow-x, scroll will appear only when inner size is biggest that DIV area

blocks|key|1636794|text|或者简单地使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1636795|word-wrap:+break-word;|code-block|syntax|javascript|1636796|在IE+5.5%2B、火狐3.5%2B以及Chrome和Safari等WebKit浏览器中支持。|1636797|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Or simply use 

<pre><code>word-wrap: break-word;
</code></pre>

supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.

blocks|key|1636830|text|尝试white-space:normal;这将覆盖继承white-space:nowrap;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1636831|entityMap^0|2|J|R|J|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

try <code>white-space:normal;</code> This will override inheriting <code>white-space:nowrap;</code>

blocks|key|1421988|text|我发现word-wrap:+anywhere是有效的(与另一个答案中提到的word-wrap:+break-word相反)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1421989|另请参阅：|1421990|What+does+"anywhere"+mean+in+"word-wrap"+css+property?|1421991|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/56304531/what-does-anywhere-mean-in-word-wrap-css-property^0|3|J|11|L|0|0|0|1I|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|J|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

I found that <code>word-wrap: anywhere</code> worked (as opposed to <code>word-wrap: break-word</code> mentioned in another answer).

See also:

<a href="https://stackoverflow.com/questions/56304531/what-does-anywhere-mean-in-word-wrap-css-property">What does &quot;anywhere&quot; mean in &quot;word-wrap&quot; css property?</a>

I have a div with a width of 250px. When the innertext is wider than that i want it to break down. The div is float: left and now has an overflow. I want the scrollbar to go away by using word-wrapping. How can i achieve this?

<pre><code>&lt;div id="Treeview"&gt;
&lt;div id="HandboekBox"&gt;
 &lt;div id="HandboekTitel"&gt;
 &lt;asp:Label ID="lblManual" runat="server"&gt;&lt;/asp:Label&gt;
 &lt;/div&gt;
 &lt;div id="HandboekClose"&gt;
 &lt;asp:ImageButton ID="btnCloseManual" runat="server" 
 ImageUrl="Graphics/close.png" onclick="btnCloseManual_Click" 
 BorderWidth="0" ToolTip="Sluit handboek" /&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;asp:TreeView ID="tvManual" runat="server" RootNodeStyle-CssClass="RootNode"&gt;
 &lt;Nodes&gt;

 &lt;/Nodes&gt;
&lt;/asp:TreeView&gt;
&lt;/div&gt;
</code></pre>

CSS:

<pre><code>#Treeview
{
padding-right: 5px;
width: 250px;
height: 100%;
float: left;
border-right: solid 1px black;
overflow-x: scroll;
}
</code></pre>

CSS word-wrapping in div

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个宽度为250px的div。当内部文本比它更宽时，我希望它被分解。div是float: left，现在有一个溢出。我想让滚动条通过自动换行的方式消失。我如何才能做到这一点？<div id="Treeview"><div id="HandboekBox"> <div id="HandboekTitel"> ...

问CSS单词在div中换行
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS单词在div中换行EN