老师,为什么我的这个是向下溢出?然后就没有效果呀?ellipsis省略号在哪里?

来源:1-6 新文本属性(text-align-last和text-overflow)

慕尘埃191116

2019-12-18 18:02:49

!DOCTYPE html>

<html>

<head>

    <title>linear-gradient</title>

    <meta content="text/html;charset=utf-8" http-equiv="content-type">

    <style type="text/css">

      p{

          font-size:14px;

          width:500px;

          height:100px;

          margin:50px auto;

          background:#e7ecf0;

          overflow:hidden;

      }

      p:nth-child(1){

        text-overflow:clip;

      }

      p:nth-child(2){

        text-overflow:ellipsis;

      }

      p:nth-child(3){

        text-overflow:'>>';

      }

    </style>

</head>

<body>

<p><span>text-overflow:clip</span><br>路透社16日报道称,中国国家统计局周一公布,11月规模以上工业增加值同比实际增长6.2%,远高于路透分析师的预估中值——5%;社会消费品零售总额同比增8%,亦高于路透预估中值的7.6%。两项数据均为今年6月以来的最高值。11月中国工业增加值数据向好,与此前发布的工厂活跃程度和采购经理人指数改进相互呼应,这说明在出口承压背景下中国政府所采取的支持内需措施发挥出了作用。日本工程机械制造商小松制作所</p>

<p><span>text-overflow:ellipsis</span><br>报道指出,这些数据显示中国经济在年底显露出企稳向好迹象,11月工业和消费增速均优于预期,双双创下五个月高位,投资则持稳。

   11月中国工业增加值数据向好,与此前发布的工厂活跃程度和采购经理人指数改进相互呼应,这说明在出口承压背景下中国政府所采取的支持内需措施发挥出了作用。日本工程机械制造商小松制作所11月中国工业增加值数据向好,与此前发布的工厂活跃程度和采购经理人指数改进相互呼应,这说明在出口承压背景下中国政府所采取的支持内需措施发挥出了作用。</p>

 <p><span>text-overflow:'>>'</span><br>日本工程机械制造商小松制作所此外,11月中国工业增加值数据向好,与此前发布的工厂活跃程度和采购经理人指数改进相互呼应,这说明在出口承压背景下中国政府所采取的支持内需措施发挥出了作用。日本工程机械制造商小松制作所(Komatsu Ltd.)表示,其在华设备利用时长11月份增加,是8个月来首次,与采购经理人指数上升相契合。https://jingyan.baidu.com/article/c85b7a645728ad003bacfgdfereterterewreterwerwerwerewrwerwerwerwerwerw958b.html</p>

</body>

</html>


写回答

1回答

好帮手慕糖

2019-12-18

同学你好,代码中的问题如下:

1、如下,开头这里缺少“<”,建议:可以查看是忘记粘贴了,还是忘记写了。

http://img.mukewang.com/climg/5dfa059b0918346e02670061.jpg

2、向下溢出是因为文字会自动换行,所以在宽度存放不下的时候,就自动换行了。

正常的汉字,以及英文单词都是可以换行的(英文以空格分隔单词,每个单词之间有一个空格,一个完整的单词是不换行的,除非是单词之间发生换行,比如图一这样的),但若是不规则的字母,比如:如下图二中这样字母连在一起的,被认为是一个很长的单词了,就不会换行。

图一如下:

http://img.mukewang.com/climg/5dfa085309a2419e06560081.jpg

图二如下:

http://img.mukewang.com/climg/5dfa07bd0935497c06750081.jpg

3、没有显示是因为这个效果需要文字在一行显示才可以,但是这里换行了就不可以了。建议:可以设置white-space: nowrap;属性,使其在一行中显示。例:

http://img.mukewang.com/climg/5dfa08c8098557da03420264.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程