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

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
풀어 주다: 2016-06-24 11:50:15
원래의
1289명이 탐색했습니다.

问题:客户要求文字必须是一行,超出部分自动隐藏。而现在没有办法在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>
    로그인 후 복사



원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿