相关疑难解决方法(0)

body {\n  width: 300px;\n}\n\n.dont-break-out {\n  /* Option 1 */\n  /* overflow-wrap: break-word; */ \n  /* Option 2 */\n  /* word-break: break-word; */\n}

<p class="dont-break-out" lang="en-US">For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.</p>\n\n<p class="dont-break-out" lang="en-US">According to Wikipedia, The longest word in any of the major English language dictionary is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica …

.container {
  /* 
     Container's width can be dynamically resized. 
     I put width = 300px in the example to demonstrate a case 
     where container's width couldn't hold second msg 
  */
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1em;
  background-color: blue;
}

.parent{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  padding:1em;
  background-color:red;
  box-sizing:border-box;
  margin-bottom: 1em;
}
.name{
  background-color:mistyrose;
  width: 70px;
  padding: 1em;
}
.msg{
  background-color:powderblue;
  max-width: 30vw;
  padding:.5em;
  word-wrap:break-word;
}

<div class='container'>
 <div class="parent">
    <div class="name">
      David
    </div>
    <div class="msg">
    How are you? How …

.ow {
  overflow-wrap: break-word;
  background: lightgreen;
}

.wb {
  word-break: break-word;
  background: lightblue;
}

div {
  width: 5em;
  display: inline-block;
}

<div class="ow">
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
</div>

<div class="wb">
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
</div>

<div class="ow">
Most words are short and don't need to …