css, html 줄바꿈 문제 no-wrap, word-break

띄어쓰기 없는 단어 줄바꿈 삽질의 기록...

 

import React, { useState, useEffect } from "react";
import styled from "styled-components";

const CreatePostWrapper = styled.div`
  position: absolute;
  width: 84%;
  max-width: 824px;
  left: 50%;
  transform: translateX(-50%);
  margin: 2rem 0;
  background-color: white;
  border-radius: 7px;
  padding: 2rem;
  border: 2px solid red;
`;

const App = () => {

  return (
    <>
      <CreatePostWrapper>
        GOODandelayWebsintsnippeTotalvkdovjpweijvpwoevjmovmwjeopjmpoewvmweevmoppo
      </CreatePostWrapper>
    </>
  );
};

export default App;

 

 

보통 텍스트는 정해진 width를 넘어가면 자동 줄 바꿈이 되지만 위에 문제는 띄어쓰기 없는 글을 쓴다면 한 단어로 인식하여서 width를 넘어가도 줄 바꿈이 되지 않는다. 

 

.container {
  word-break:break-all;
}

 

다음과 같은 속성을 주어 띄어쓰기 없는 문장을 줄 바꿈 할 수 있다.

 

하지만 위 옵션은 띄어쓰기가 있는 정갈하고 깔끔한 문장에서 가독성에 일부 문제가 생긴다.

 

break-all 설정시

 

 

break-all 미설정시

 

단어를 중간에 자르지 않아서 더 읽기 수월하다.

 

이런 방법도 있다. 

 

.container{
  text-overflow: ellipsis;
  overflow:hidden;
}

 

위와 같이 속성을 주어서

 

 

만약 어떤 유저가 변태같이 띄어쓰기 없는 단어와 문장을 적절히 섞었다면????

 

GOODandelayWebsintsnippeTotalvkdovjpweijvpwoevjmovmwjeopjmpoewvmweevmoppo
I am trying to count the number of companies that have at least one product from the following query
So, this shows me a list of all companies, and the count of products for each company
What I am trying to achieve is a count of companies from the above result
This can be achieved as follows

 

.........

이건 모르겠다. 

이 세상에서 제일 긴 단어 길이를 구해서 split(" ")으로 나눈다음 배열을 돌면서

제일 긴 단어수보다 넘어가면 css 속성을 따로 설정해두는 방법으로 해야하나 싶다. 

 

티스토리는 어찌 보여주나 확인해보자...

GOODandelayWebsintsnippeTotalvkdovjpweijvpwoevjmovmwjeopjmpoewvmweevmoppo
I am trying to count the number of companies that have at least one product from the following query
So, this shows me a list of all companies, and the count of products for each company
What I am trying to achieve is a count of companies from the above result
This can be achieved as follows

 

넘어간다... 

다른 사이트는 어찌 구현됐는지 확인해봐야 겠다.

변태같은 유저들이 돌아이같이 글 안쓰기를 바라자