CSS는 단일 및 여러 줄을 구현하기 위해 줄바꿈 및 초과 숨기기를 강제합니다(코드 예).-CSS 튜토리얼-php.cn

CSS는 단일 및 여러 줄을 구현하기 위해 줄바꿈 및 초과 숨기기를 강제합니다(코드 예).

云罗郡主

풀어 주다： 2018-10-20 14:37:47

앞으로

2393명이 탐색했습니다.

이 기사에서 제공하는 내용은 CSS 강제 줄바꿈 및 숨김을 넘어선 단일 및 다중 줄 구현(코드 예제)에 대한 내용으로, 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게 도움이 될 것입니다.

<!--
white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
white-space:设置如何处理元素内的空白；
word-break: normal|break-all|keep-all;
word-break：用来标明怎么样进行单词内的断句
word-wrap: normal|break-word;
word-wrap:用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
text-overflow:ellipsis; 让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器，Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能，多出的内容只能隐藏起来。
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
/* autoprefixer: off */ /* autoprefixer: on */解决-webkit-box-orient:vertical
-->

로그인 후 복사

인기 있는 설명:

word-break:break-all; 문자를 줄바꿈의 기초로 사용하여 영어에서만 작동합니다.
word-wrap:break -word; 단어를 줄 바꿈의 기초로 사용하여 영어로만 작동합니다.
white-space:pre-wrap; 중국어에서만 작동하며 줄 바꿈을 강제합니다.
줄 바꿈을 강제하지 않습니다. , 함수
white-space:nowrap; text-overflow:ellipsis; 줄 바꿈 없음, 초과 부분은 숨겨지고 타원 형태로 나타납니다(일부 브라우저에서 지원됨) #🎜🎜 #

사례: 사례에 주석이 있습니다.

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>
        body {
            width: 100%;
            margin: 200px 20%;
        }
        .indexBox1 {
            width: 60%;
            height: 100px;
            font-size: 14px;
            color: #ffffff;
            display: flex;
            justify-content: space-around;
        }
          /* 单行 */
        .indexBox1 .box_text1 {
            width: 100px;
            height: 98px;
            background: gray;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            /* word-break: normal;
             word-wrap: none; */
        }
        /* 多行 */
        .indexBox1 .box_text4 {
            width: 100px;
            height: 98px;
            background: black;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            /* Firefox */
            display: -moz-box;
            /* autoprefixer: off */
            -moz-box-orient: vertical;
            /* autoprefixer: on */
            /* Safari、Opera 以及 Chrome */
            display: -webkit-box;
            /* autoprefixer: off */
            /*解决下面这个属性不显示*/
            -webkit-box-orient: vertical;
            /* autoprefixer: on */
            /*解决上面这个属性不显示*/
            /* 控制在第几行多出的内容省略 */
            -webkit-line-clamp: 5;

        }
        .indexBox1 .box_text5 {
            /* word-break: normal|break-all|keep-all; */
            word-break: break-all;
        }
        .indexBox1 .box_text6 {
            /* word-wrap: normal|break-word; */
            word-wrap: break-word;
        }
    </style>
</head>

<body>
    <!-- 单行 -->
    <p class="indexBox1">
        <p class="box_text1">
            我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃 我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃 我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃
        </p>
        <p class="box_text1">
            we are come from a world,we have us dream,wo never give up us deram;
        </p>
        <p class="box_text1">
            we are come from a world,we have us dream,wo never give up us deram;
        </p>
    </p>
    <!-- 多行 -->
    <p class="indexBox1">
        <p class="box_text4">
            我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃 我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃 我们来自同一个世界，我们都有自己的梦想，我们都不曾放弃
        </p>
        <p class="box_text4 box_text5">
            we are come from a world,we have us dream,wo never give up us deram;
        </p>
        <p class="box_text4 box_text6">
            we are come from a world,we have us dream,wo never give up us deram;
        </p>
    </p>
</body>

</html>

로그인 후 복사

-webkit-line-clamp는 줄 수를 제한하는 데 사용됩니다. 블록 요소에 표시되는 텍스트입니다. 이 효과를 얻으려면 다른 WebKit 속성과 결합해야 합니다. 일반적으로 결합되는 속성:
display:-webkit-box; 객체를 유연한 상자 모델로 표시하려면 결합해야 합니다.
-webkit-box-orient는 플렉스 박스 객체의 하위 요소 배열을 설정하거나 검색하기 위해 속성과 결합되어야 합니다.

그러나 Firefox 브라우저와 호환되기 위해 CSS와 js를 결합하여 구현됩니다.

구현 과정은 다음과 같습니다. #🎜🎜 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .content {
        margin: 0 auto;
        width: 400px;
        line-height: 25px;
        margin-top: 100px;
        position: relative;
        height:auto;
        overflow: auto;
    }
    .contentHide{
        height: 50px;
        overflow:hidden;
    }
    .contentHide::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding-left: 20px;
        /* background: -webkit-linear-gradient(left, transparent, #fff 55%);
        background: -o-linear-gradient(right, transparent, #fff 55%);
        background: -moz-linear-gradient(right, transparent, #fff 55%); */
        background: linear-gradient(to right, transparent, #fff 55%);
    }
</style>

<body>
    <p class="content">我们来自同一个世界我们都有自己的梦想，我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃;我们不曾放弃</p>
    <p class="content">我们来自同一个世界我们都有自己的梦想，我们不曾放弃;我们不曾放弃</p>
    <p class="content">我们来自同一个世界我们都有自己的梦想，我们不曾放弃</p>
</body>
<script>
    let ct=document.querySelectorAll(".content");
    for(let i=0;i<ct.length;i++){  //通过高度判断是否要添加超出隐藏的class名
        if(ct[i].offsetHeight>50)
        {
            ct[i].classList.add(&#39;contentHide&#39;);
        }
    }
    
</script>
</html>

로그인 후 복사

위 내용은 CSS 강제 줄 바꿈 및 숨김을 넘어 단일 및 다중 줄(코드 예제)을 달성하는 방법에 대한 완전한 소개입니다.

에 대해 자세히 알고 싶다면 CSS 비디오 튜토리얼 , PHP 중국어 웹사이트에 주목하세요.

위 내용은 CSS는 단일 및 여러 줄을 구현하기 위해 줄바꿈 및 초과 숨기기를 강제합니다(코드 예).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!