css强制换行和禁止换行的区别_css3不允许换行

编程小6 (1) 2024-06-10 09:23

Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
css强制换行和禁止换行的区别_css3不允许换行,希望能够帮助你!!!。

强制换行

word-break: break-all; /* 只对英文起作用，以字母作为换行依据。  */ word-wrap: break-word; /* 只对英文起作用，以单词作为换行依据。  */  white-space: pre-wrap; /* 只对中文起作用，强制换行。  */

禁止换行

 white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 超出隐藏 */ text-overflow: ellipsis; /* 超出内容显示省略号 */

API

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;

white-space: 属性设置如何处理元素内的空白
normal: 默认。空白会被浏览器忽略。
pre: 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
pre-wrap: 保留空白符序列，但是正常地进行换行。
pre-line: 合并空白符序列，但是保留换行符。
inherit: 规定应该从父元素继承 white-space 属性的值。

word-wrap: normal|break-word;

word-wrap: 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
normal: 只在允许的断字点换行(浏览器保持默认处理)
break-word: 在长单词或URL地址内部进行换行

word-break: normal|break-all|keep-all;

word-break 属性用来标明怎么样进行单词内的断句。
normal：使用浏览器默认的换行规则。
break-all:允许再单词内换行
keep-all:只能在半角空格或连字符处换行

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Title</title>  
    <style>
        /* 默认 */
        .content{
           border: 1px solid red; 
           width: 100px;
           margin-bottom: 20px;
        }
        /* 强制换行 以字母做为换行依据 */
        .word-break{
            word-break: break-all;
        }
        /* 强制换行 以单词做为换行依据 */
        .word-wrap{
            word-wrap: break-word;
        }
        /* 强制不换行 */
        .white-space{
            white-space: nowrap; 
        }
    </style>
</head>
<body>
    <!-- 默认 -->
    <div class="content">aaaaaaaaaaaaaaaaaaa</div>
    <!-- 强制换行 以字母做为换行依据 -->
    <div class="content word-break">aaaaaaaaaaaaaaaaaaa</div>
     <!-- 强制换行 以单词做为换行依据 -->
    <div class="content word-wrap">Title Title Title Title Title Title Title</div>
     <!-- 默认 -->
    <div class="content">这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</div>
     <!-- 强制不换行 -->
    <div class="content white-space">这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</div>
</body>

</html>