CSS内の文字列は1行でなければならず、超えた部分が自動的に非表示になる問題part_html/css_WEB-ITnose

質問: 顧客は、テキストは 1 行である必要があり、余分な部分は自動的に非表示になるように要求しています。しかし現在、php でインターセプトされる単語の数を制御する方法はなく、フロントエンド CSS でのみ処理できます。

ホームページのdivの幅は一定です。

解決策は次のとおりです:

1. 
   
2. 
   
3. word-break: keep-all;/*これはオプションです*/

   word-wrap: break-word;white-space: nowrap;<span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(240, 240, 240);">/*强制不换行，如果没有此行，则当用鼠标滑过的效果时，有可能会出现，因为超出的部分已经漂浮到其他的div上了*/</span>overflow: hidden;<span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(240, 240, 240);"> /*自动隐藏文字*/</span>

   <span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(240, 240, 240);"><span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(240, 240, 240);">text-overflow: ellipsis;/*文字隐藏后添加省略号，如果不想用，可以省略此项*/ </span></span>

   <span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(240, 240, 240);"><span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(240, 240, 240);"><span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(240, 240, 240);">width: 20em;/*不允许出现半汉字截断*/</span></span></span>