Strange issue with android:ellipsize="end"

Question

I am using android:ellipsize="end" in android xml file, & surprisingly I am not getting the layout that I want, the 3 dots(...) are showing but after that dots there is another word truncated. Also this is a "not-always" behavior, check the ListView attached, sometimes, the behavior is normal & sometimes not.

Here's the screenshot of the layout from my device,

I don't have any idea why this is happening. Here's my xml file, having problem with the tv_news_content TextView -

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@color/white" >

<ImageView
    android:id="@+id/iv_next_tier"
    android:layout_width="18dp"
    android:layout_height="21dp"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="10dp"
    android:src="@drawable/right_arrow" >
</ImageView>

<TextView
    android:id="@+id/tv_news_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="7dp"
    android:layout_marginRight="5dp"
    android:layout_marginTop="3dp"
    android:layout_toLeftOf="@+id/iv_next_tier"
    android:ellipsize="end"
    android:maxLines="2"
    android:text="News Title"
    android:textColor="@color/black"
    android:textSize="17dp"
    android:textStyle="bold" />

<TextView
    android:id="@+id/tv_news_content"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/tv_news_title"
    android:layout_below="@+id/tv_news_title"
    android:layout_marginRight="5dp"
    android:layout_toLeftOf="@+id/iv_next_tier"
    android:ellipsize="end"
    android:maxLines="2"
    android:text="News Contents"
    android:textColor="@color/black_light"
    android:textSize="15dp" />

<View
    android:id="@+id/view"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_below="@+id/tv_news_content"
    android:layout_marginTop="5dp" />

To make things clear, tv_news_title is the topmost bold TextView, & iv_next_tier is the small arrow-type ImageView at the right. & tv_news_content is the TextView that I am facing problem with.

Any solution why I am not getting desired output? Desired output means the always normal behaviour - I want those 3 dots at the end of second line of tv_news_content TextView, not before a truncated word.

Any suggestion is appreciated.

Answer 1

Finally found what was causing this issue in my app!!

While RuAware's answer led me on the right path, I found that it didn't fix the problem for all of my text blocks. Given that it worked for some, I felt it was clearly due to some malicious character. So I went through one broken text block and just started removing characters until it stopped breaking.

It turns out it was the new line character '\n' that was causing it. Even if the new line was after the ellipsize, the new line character was [inconsistently] causing this problem as long as it was somewhere within the string.

The issue is solved by doing something similar to the following before setting the text to your view:

text = text.replace('\n',' ');

Answer 2

When setting the text for the textview make sure the text is not greater than 750 characters so use txt = theText.substring(0, 750) or something like that before calling settext. This works on the emulator with your feed. and should be enough characters for a 10inch tablet too

Answer 3

Take a look at this post. There is a custom EllipsizingTextView which solves ellipsizing problem for multiline view. However it may solve you problem too.

Answer 4

I was experiencing the same problem when displaying a String containing html formatted text.

Removing all html tags with myText.replaceAll("\\<.*?>","") solved the problem.

You can also remove html tags using Html.fromHtml(myText).toString(), but notice that you must use .toString() and not apply the fromHtml output directly to the TextView. If some special characters are html encoded (&amp, &gt, &lt...) you can safely apply again Html.fromHtml() to the final String.

Answer 5

i used :

if (myModel.mDataText().length() > 150) {
    mTextView.setText(Html.fromHtml(myModel.mDataText().substring(0, 150) + "..."));
} else {
    mTextView.setText(Html.fromHtml(myModel.mDataText() + "..."));
}