>웹 프론트엔드 >HTML 튜토리얼 >css中要求文字必须是一行,超出部分自动隐藏的问题_html/css_WEB-ITnose

css中要求文字必须是一行,超出部分自动隐藏的问题_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
2016-06-24 11:50:151291검색

问题:客户要求文字必须是一行,超出部分自动隐藏。而现在没有办法在php里控制截取字数,只能在前端css里处理。

首页div的宽度是一定的。

处理办法为:



  1. 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>



성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.