www.zhihu.com - Incorrect layout of the question title

[webcompat-bot]

URL: https://www.zhihu.com/question/305342010/answer/564208455

Browser / Version: Firefox Mobile 65.0
Operating System: Android 7.1.1
Tested Another Browser: Yes

Problem type: Design is broken
Description: www.zhihu.com，incorrect layout of mobile page
Steps to Reproduce:
the layout of the question's title in mobile page is not correct

Browser Configuration

• mixed active content blocked: false
• image.mem.shared: true
• buildID: 20181227144402
• tracking content blocked: false
• gfx.webrender.blob-images: true
• hasTouchScreen: true
• mixed passive content blocked: false
• gfx.webrender.enabled: false
• gfx.webrender.all: false
• channel: beta

Console Messages:

[u'[JavaScript Warning: "This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!" {file: "https://www.zhihu.com/question/305342010/answer/564208455" line: 0}]', u'[JavaScript Warning: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://zhihu-web-analytics.zhihu.com/api/v1/logs/batch. (Reason: CORS request did not succeed)."]', u'[JavaScript Warning: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://zhihu-web-analytics.zhihu.com/api/v1/logs/batch. (Reason: CORS request did not succeed)."]', u'[JavaScript Warning: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://zhihu-web-analytics.zhihu.com/api/v1/logs/batch. (Reason: CORS request did not succeed)."]']

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.

Affected area:

<div class="Card QuestionHeader-content">
	<div class="QuestionHeader-tags"></div>
	<div data-za-detail-view-element_name="Question" class="QuestionHeader-title">
		<a href="/question/305342010">中国应不应该提高社会福利？</a>
	</div>
	<div class="QuestionHeader-metaCard">
		<div class="QuestionHeader-metaCardContent">
			<img src="" alt="社会问题">
				<div class="QuestionHeader-metaCardBody">
					<span>社会问题</span>
					<div class="QuestionHeader-metaCardAuthor">“凡影响社会进步与发展，妨碍社会大部分成员的正常生活的公共问题就是社会问题。它是社会结构本身的缺陷或社会变迁过程中社会结构内出现功能障碍、关系失调和整合错位等原因造成，为社会上相当多的人所共识，需要运用社会力量才能消除和解决。”</div>
				</div>
		</div>
		<svg class="Zi Zi--ArrowRight" width="32" height="32" fill="#d3d3d3" viewBox="0 0 24 24">
			<path d="M9.218 16.78a.737.737 0 0 0 1.052 0l4.512-4.249a.758.758 0 0 0 0-1.063L10.27 7.22a.737.737 0 0 0-1.052 0 .759.759 0 0 0-.001 1.063L13 12l-3.782 3.716a.758.758 0 0 0 0 1.063z" fill-rule="evenodd"></path>
		</svg>
	</div>
</div>

Tested with:
Browser / Version: Firefox Nightly 66.0a1 (2019-01-02)
Operating System: Google Pixel (Android 9) - 1080 x 1920 pixels (~441 ppi pixel density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

Moving to Needsdiagnosis for further investigation.

[karlcow]

hmm it seems more broken in Chrome than Firefox no?

but if we are talking about the text being longer than the box. This is just -webkit-line-clamp

.QuestionHeader-metaCardAuthor {
	padding-right: 20px;
	display: -webkit-box;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

[karlcow]

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=866102

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.