常用CSS记录

最新推荐文章于 2024-08-30 15:33:13 发布

BAtodl

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量204

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/BAtodl/article/details/126536722

版权

常用CSS记录

1. 换行

1. 换行

例1：

<style>
  .out {
    width: 300px;
    border: 1px solid #ccc;
  }
  .out .text{
    margin-top: 16px;
  }
</style>

<body>
  <div class="out">
    <div class="text">
      1425548四点开会啦三个事故后果会是sjhguasepgghhhhhhhhhhhhhsagiua会受到帮你发
    </div>
    <div class="text">
      sahghggsajiuepqqnnlncbangkshoiehuaduugfkaskpaspfjaogeghghiehuiqejaonnjj
    </div>
    <div class="text">
      和适度更好拉上来就撒娇的胡歌吧按时间黄瓜丝吉萨亚特很哈皮快递给护额阿布接收到的谷歌苹果
    </div>
  </div>
</body>

1.1 强制换行

例1英文默认不换行，如需要强制换行.text元素要增加css样式：
word-break: break-all;
white-space: normal;

<style>
  .out .text{
    margin-top: 16px;
    word-break: break-all;
    white-space: normal;
  }
</style>

1.2 强制不换行

例1中文默认换行，如需要强制不换行.text元素要增加css样式：
white-space:nowrap;

<style>
  .out .text{
    margin-top: 16px;
    white-space: nowrap;
  }
</style>

1.3 不换行显示省略号

例1如需要不换行显示省略号.text元素要增加css样式：
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

<style>
  .out .text{
    margin-top: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>

BAtodl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用CSS记录

常用CSS样式：换行
复制链接

扫一扫