javascript - 웹 프런트엔드는 콘텐츠의 길이가 두 줄인지 어떻게 확인합니까? (화면 너비가 다른 경우)

Question

다양한 화면 크기에서 텍스트가 차지하는 줄 수를 계산할 수 있는 방법이 있나요?
< /p>

그림과 같이 내용이 사용자 휴대폰 화면 너비 아래 두 줄을 초과하는 경우에는 전문이 표시되고, 그렇지 않은 경우에는 전문이 표시되지 않습니다.

我想大声告诉你 · Answer

외부 레이어에 플렉스 레이아웃을 사용하거나, 높이의 행 수를 설정하거나, 외부 레이어에 최대 높이 max-height를 지정하세요
내부 레이어 p에 텍스트를 배치하고 정상적으로 표시됩니다

으아악

html 구조:

으아악

그런 다음 두 사람의 키를 판단하세요.

으아악

이때 "더보기"가 표시됩니다

给我你的怀抱 · Answer

행 높이를 기준으로 판단하는 것입니다. 행 높이가 1행 높이보다 크면 내용이 두 행이라는 의미입니다. 코드는 다음과 같습니다.

html은 다음과 같습니다.

으아아아

js는 다음과 같습니다:

으아아아

코딩이 쉽지 않은데 마음에 드신다면 좋아요 부탁드려요~

阿神 · Answer

그런 다음 행 높이를 판단하세요

巴扎黑 · Answer

현재 텍스트에는 별도의 돔이 있어야 하며 높이와 줄 높이를 가져와 동적으로 계산해야 합니다

曾经蜡笔没有小新 · Answer

아이디어를 제공하려면 줄 높이를 20px로 설정한 다음 페이지가 렌더링된 후 js에서 노드의 offsetHeight 속성을 사용하세요. offsetHeight / 20줄 수

过去多啦不再A梦 · Answer

사용

으아악

바로 그거야