div内文字换行的几种情况

div中文字换行问题:

div设置宽度以后,如果div中放的是中文,默认文字超过div宽度会自动换行,如果是英文,则默认是不换行的,即会超出div的宽度继续显示。这种情况,需要我们通过属性值进行强制换行

  1. word-break:break-all;只对英文起作用,以字母作为换行依据
  2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据
  3. white-space:pre-wrap; 只对中文起作用,强制换行
  4. white-space:nowrap; 强制不换行,都起作用
  5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现(部分浏览器支持)

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>

    <style>
        div{
            width: 30px;
            /* height: 30px; */
            border: 1px solid black;
            margin-top: 20px;
        }
        /*只对英文起作用,以字母作为换行依据*/
        .p1 {
            word-break: break-all;
            width: 150px;
        }

        /*--只对英文起作用,以单词作为换行依据*/
        .p2 {
            word-wrap: break-word;
            width: 150px;
        }

          /*只对中文起作用,强制换行*/
        .p3 {
            white-space: pre-wrap;
            width: 150px;
        }

       /*强制不换行,都起作用*/
        .p4 {
            white-space: nowrap;
            width: 10px;
        }

        /*不换行,超出部分隐藏且以省略号形式出现*/
        .p5 {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100px;
        }

        
       
    style>
head>

<body>
    <div class="p1">hello world hello world hello world hello world hello worlddiv>
    <div class="p2">hello world hello world hello world hello world hello worlddiv>
    <div class="p3">hello world hello world hello world hello world hello worlddiv>
    <div class="p4">hello world hello world hello world hello world hello worlddiv>
    <div class="p5">hello world hello world hello world hello world hello worlddiv>

body>

html>

使用上述属性一定要指定容器的宽度

你可能感兴趣的:(前端,陈福国,陈福国前端,div内文字换行,文字换行,css强制英文换行)