前端中，文字过长时用...显示

Posted 2023-05-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端中，文字过长时用...显示相关的知识，希望对你有一定的参考价值。

参考技术A <div class="showtext"></div>

.showtext

width:300px;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

说明：

1、宽度一定要设置，可以根据实际需求调整。

2、white-space:nowrap是禁止文字折行。

3、text-overflow表示当文本溢出时是否显示省略标记，有两个值：

clip：不显示省略标记（...），而是简单的裁切。

ellipsis：当对象内文本溢出时显示省略标记（...）

4、overflow:hidden表示溢出内容为隐藏。

android 一行有多个textview 当内容过长时怎么让第一个显示省略号最后一个全部显示

我一行又两个TextView 但是当内容过长时，后面那个TextView的内容会显示省略号，我现在想让后面的Textview中内容全部显示，前面那个Textview多出来的部分显示省略号

TextView中有个ellipsize属性,作用是当文字过长时,该控件该如何显示,解释如下:

android:ellipsize=”start”—–省略号显示在开头

android:ellipsize=”end”——省略号显示在结尾

android:ellipsize=”middle”—-省略号显示在中间

android:ellipsize=”marquee”–以跑马灯的方式显示(动画横向移动)

文字左右滚动三个属性：

android:singleLine="true"

android:ellipsize="marquee"

android:marqueeRepeatLimit="marquee_forever"

参考技术A <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/activity_horizontal_margin"
            android:layout_marginEnd="@dimen/activity_horizontal_margin"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/cabinet_location_text"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:singleLine="true"
                android:ellipsize="end"
                android:textSize="16sp" />

            <TextView
                android:id="@+id/packagebox_no_text"
                android:layout_width="60dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:paddingStart="3dp"
                android:paddingTop="2dp"
                android:paddingEnd="3dp"
                android:paddingBottom="2dp"
                android:layout_marginLeft="5dip"
                android:background="@drawable/round_orange_bg"
                android:textColor="@android:color/white"
                android:textSize="@dimen/font_medium" />
        </LinearLayout>

后面的textview固定宽度android:layout_width="60dp"，第一个textview设置android:layout_weight="1"，android:layout_width="0dp"就能实现效果。

参考技术B 实现是可以实现，但是你确定必须第二个textview要显示完整/?追问

是的，不管屏幕大小，第二个必须完整显示

追答

你的第二个textView的参数给我看一些，你是不是加了singleline了，导致显示不完整~不然的话它默认情况下(wrap_content)就会全部显示，遇到边界自己换行~

追问

追答

你有一个singleline如果超出了肯定显示不完整而用省略号代替的，你这个需求就会复杂多了，因为还要考虑到美观性等等，如果简单的想要显示完整去掉singleline这个属性就ok了。

追问

如果没有singleline 他就会换行，我现在只要显示一行，并且后面的textView全部显示，多出来的将前面的textview中内容显示省略号

追答

这个需求有点不切实际，如果你第二个textview占了整个一行都没有显示完怎么办。按照你的意思，我觉得做不到，哪怕用代码控制也很难。
我认为需要改需求，比如点击显示完整信息等~这么搞实在没必要