当前位置：网站首页>Several cases of word wrapping in div

Several cases of word wrapping in div

2022-07-29 03:43:00 【Chen Fuguo】

div Chinese word wrapping ：

div After setting the width , If div In the middle is Chinese , The default text exceeds div The width will wrap automatically , If it's English , The default is no newline , Will exceed div The width of continues to display . This situation , We need to force line breaks through attribute values

  1. word-break:break-all; Only for English , Wrap by letter
  2. word-wrap:break-word; Only for English , Word wrap
  3. white-space:pre-wrap; Chinese only , Forced line wrap
  4. white-space:nowrap; Force no wrapping , It all works.
  5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis; Don't wrap , The excess is hidden and appears as an ellipsis （ Some browsers support ）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style> div{
      width: 30px; /* height: 30px; */ border: 1px solid black; margin-top: 20px; } /* Only for English , Wrap by letter */ .p1 {
      word-break: break-all; width: 150px; } /*-- Only for English , Word wrap */ .p2 {
      word-wrap: break-word; width: 150px; } /* Chinese only , Forced line wrap */ .p3 {
      white-space: pre-wrap; width: 150px; } /* Force no wrapping , It all works. */ .p4 {
      white-space: nowrap; width: 10px; } /* Don't wrap , The excess is hidden and appears as an ellipsis */ .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 world</div>
    <div class="p2">hello world hello world hello world hello world hello world</div>
    <div class="p3">hello world hello world hello world hello world hello world</div>
    <div class="p4">hello world hello world hello world hello world hello world</div>
    <div class="p5">hello world hello world hello world hello world hello world</div>

</body>

</html>

Be sure to specify the width of the container when using the above attributes

原网站

版权声明
本文为[Chen Fuguo]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/196/202207130552462702.html

边栏推荐

猜你喜欢

随机推荐