Fatal编程技术网
  • css/
  • Css 文本位于包含div的外部

Css 文本位于包含div的外部

css

Css 文本位于包含div的外部,css,css-position,Css,Css Position,我有这个，当文本到达div的右边框时，它不应该转到新行吗 html: <div class="test"> <p>dfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodj

我有这个，当文本到达div的右边框时，它不应该转到新行吗

html:

<div class="test">

    <p>dfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodj</p>
</div>

div.test{
    width:400px;
    height:800px;
    border-style: solid;
    border-color: red;
    margin:1px; padding:1px;

}
使用
wordwrap:break-word

div.test{
    width:400px;
    height:800px;
    border-style: solid;
    border-color: red;
    margin:1px; padding:1px;
    word-wrap:break-word;
}
实例

就我而言，结果是：

something&nbsp;something
计数为单个长单词，因此超出了div

通过这样做来修复它

something&nbsp; something
我也有同样的问题，word break对我来说不太好看-所以我发现将下面的CSS应用到容器中是可行的：

 text-overflow: ellipsis;
 overflow: hidden;
省略号也有很好的浏览器支持，

因为文本没有任何空间，所以不会创建新行

试着说：

[space]/（）/（ ；）

例如，我将文本更改为：

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
进入：

它将创建自己的新行。

您可以执行
宽度：自动，但如果需要特定的
宽度：400px
您可以使用
wrap:break-word
或
wrap:break-all
将单词分开，我不喜欢。我建议
宽度：适合内容

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx



xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx