CSS, j의 한 줄, 여러 줄 텍스트 오버플로에 줄임표가 표시됩니다.-HTML 튜토리얼-php.cn

프로젝트에서는 실제 설명 텍스트가 너무 많아 초기 페이지의 세로 길이가 너무 길어 나머지 정보의 활용도가 떨어지므로 텍스트가 너무 많을 경우 초기화가 필요합니다. 줄 수

1. CSS 한 줄 텍스트가 오버플로되고 줄임표가 표시됩니다.

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
    我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出。
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

로그인 후 복사

2. CSS 여러 줄 텍스트가 넘치고 줄임표가 표시됩니다.

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
    我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本。
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

로그인 후 복사

위의 두 가지는 태그에 텍스트만 있는 상황에 적합하며, 가끔 그런 상황에 직면하게 됩니다

<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>我是内容<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>我是内容<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>我是内容<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>我是内容<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

로그인 후 복사

3. 세 번째 방법은 위 상황에서 발생하는 문제를 해결하는 것입니다

인터넷에서 많은 예를 보았는데 각각 고유한 장점이 있습니다. 저는 고정된 줄 높이를 사용하고 줄바꿈도 각 줄마다 고정된 높이에 있습니다. 예: line-height:20px;, 변경될 때마다 빈 줄도 20px이어야 하므로 20의 배수를 사용하여 표시할 줄 수와 내용을 합리적으로 표시할 수 있습니다

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        你不想要改变世界，但是你想要看日出？想要体验下传说中的晨跑？想在晨跑中偶遇男神女神？想要看下早上5点图书馆或训练场是否有人？想呼吸下还没被汽车尾气过度渲染的空气？想给自己给爱人做个早餐？你得早起呀！昨晚事情没做完？考研单词还差几页？赶飞机、赶火车？你得早起呀！你不想上班也得早起请假不是嘛～
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        欢迎大家参加早起的鸟儿有虫吃－21天早起计划。一日之计在于晨，在沐浴晨光的过程中，我们祝愿大家开始美好的一天！
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="points"</span><span style="color: #0000ff;">></span>...<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

로그인 후 복사

<span style="color: #800000;">.text</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#707070</span>;<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">0 12px</span>;<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">20px</span>;<span style="color: #ff0000;">overflow</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #ff0000;">
margin-bottom</span>:<span style="color: #0000ff;">12px</span>;<span style="color: #ff0000;">max-height</span>:<span style="color: #0000ff;">60px</span>;}<span style="color: #800000;">
.points</span>{<span style="color: #ff0000;">content</span>:<span style="color: #0000ff;">"..."</span>;<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;">absolute</span>;<span style="color: #ff0000;">bottom</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">right</span>:<span style="color: #0000ff;">16px</span>;<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">40px</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">18px</span>;<span style="color: #ff0000;">letter-spacing</span>:<span style="color: #0000ff;">3px</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> -webkit-linear-gradient(left, transparent, #fff 55%)</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> -o-linear-gradient(right, transparent, #fff 55%)</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> -moz-linear-gradient(right, transparent, #fff 55%)</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> linear-gradient(to right, transparent, #fff 55%)</span>;}<span style="color: #800000;">
.text p</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
.text p+p</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">20px</span>;}

로그인 후 복사

<span style="color: #008000;">//</span><span style="color: #008000;"> 字体显示</span>
    <span style="color: #0000ff;">var</span> showBoo = <span style="color: #0000ff;">true</span><span style="color: #000000;">;
    $(</span>'.de-box .text').on('click',<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
        </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(showBoo){
            console.log(</span>1<span style="color: #000000;">);
            $(</span>'.de-box .text').css('maxHeight','none'<span style="color: #000000;">);
            $(</span>'.de-box .points'<span style="color: #000000;">).hide();
            showBoo </span>= <span style="color: #0000ff;">false</span><span style="color: #000000;">;
        }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
            $(</span>'.de-box .text').css('maxHeight','60px'<span style="color: #000000;">);
            $(</span>'.de-box .points'<span style="color: #000000;">).show();
            showBoo </span>= <span style="color: #0000ff;">true</span><span style="color: #000000;">;
        };
    });</span>

로그인 후 복사

이 경우 줄바꿈이 발생하고 빈 줄이 표시됩니다. 오늘은 좀 피곤해서 이 문제는 그대로 두겠습니다