这次给大家带来css控制文字的换行与裁剪，css控制文字换行与裁剪的注意事项有哪些，下面就是实战案例，一起来看一下。
关于换行、裁剪的一些CSS属性
word-wrap: normal | break-word
normal 正常换行，内容可以撑破容器，例如长单词或者长数字的情况
break-word 以单词作为换行依据，如果需要，单词内部允许断行
word-break: normal | break-all | keep-all
normal 正常换行，内容可以撑破容器，例如长单词或者长数字的情况
break-all 以字母作为换行依据
keep-all 中英文下和normal相同
white-space: normal || pre || nowrap || pre-line || pre-wrap || inherit
normal默认值，空白会被浏览器忽略
pre 空白会被浏览器保留，其行为方式类似 HTML 中的
标签<p style="text-align: left;">nowrap 文本不会换行，文本会在在同一行上，直到遇到 <br> 标签为止</p><p style="text-align: left;">pre-wrap 保留空白符序列，但是正常地进行换行(IE7-不支持)</p><p style="text-align: left;">pre-line 合并空白符序列，但保留换行符(IE7-不支持)</p><p style="text-align: left;">inherit规定应该从父元素继承 white-space 属性的值(IE不支持)</p><p style="text-align: left;">应用：</p><p style="text-align: left;"><strong><span style="color:#ff0000">文字溢出显示省略标记（...）：</span></strong></p><p style="text-align: left;"><a href="http://www.php.cn/wiki/868.html" target="_blank">text-overflow</a>: ellipsis; <br>overflow: hidden; <br>white-space: nowrap; </p><p style="text-align: left;"><strong><span style="color:#ff0000">文字换行：</span></strong></p><p style="text-align: left;">/* 以单词作为换行依据 */ <br>word-wrap: break-word; <br>word-break: normal; <br>/* 以字母作为换行依据 */ <br>word-break: break-all; </p><p style="text-align: left;"><strong><span style="color:#ff0000">文字强制不换行：</span></strong></p><p style="text-align: left;">white-space: nowrap; </p><p>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！</p><p>推荐阅读：</p><p><a href="http://www.php.cn/css-tutorial-389754.html" target="_blank">用CSS3实现鼠标浮动放大图片</a><br></p><p><a href="http://www.php.cn/css-tutorial-389744.html" target="_blank">IE8下的nth-child()兼容问题如何处理</a><br></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1706" title="一帧秒创"><img
src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d37de74c4152.png" alt="一帧秒创" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1706" title="一帧秒创">一帧秒创</a>
<p>基于秒创AIGC引擎的AI内容生成平台，图文转视频，无需剪辑，一键成片，零门槛创作视频。</p>
</div>
<a href="/ai/1706" title="一帧秒创" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p><a href="http://www.php.cn/css-tutorial-389740.html" target="_blank">在CSS边界线消失如何处理</a><br></p> 
