css如何在长数据时断行

I have search many of here but still not solve my problem, I have problem with my data is dynamic, some long and some short, short is never mind but for long text, I want it's beak line. but it's no break and draw the same line line(make duplicate text). please help me, this this my HTML

我在这里搜索了很多,但仍然没有解决我的问题,我有问题,我的数据是动态的,有些长而有些短,短是没关系,但对于长文本,我想要它的喙线。但它没有中断并绘制相同的线条(制作重复文本)。请帮帮我,这是我的HTML

Company name: <a id="com_name">REGIONAL COMMUNITY FORESTRY TRAINING CENTER FOR ASIA AND PACIFIC (RECOFTC)</a>

and my CSS:

和我的CSS:

#com_name{
  font-size: 12px;
  position: fixed;
  width: 50%;
  word-break: break-all;
  white-space: normal
}

but my result like this

但我的结果是这样的

What I want

我想要的是

Company name: REGIONAL COMMUNITY FORESTRY TRAINING CENTER FOR ASIA AND 
              PACIFIC (RECOFTC)

6 个解决方案

#1

Set line-height in your CSS.

在CSS中设置行高。

#com_name{
  font-size: 12px;
  position: fixed;
  width: 50%;
  word-break: break-all;
  white-space: normal;
  line-height: 20px;
}

#2

using line-height: 2; or line-height: 20px;

使用line-height:2;或线高:20px;

Example - 1: using line-height: 2;

示例 - 1:使用line-height:2;

#com_name{
  font-size: 12px;
  position: fixed;
  width: 50%;
  word-break: break-all;
  white-space: normal;
  line-height: 2; 
}

#com_name{
  font-size: 12px;
  position: fixed;
  width: 50%;
  word-break: break-all;
  white-space: normal;
  line-height: 2;
}

Company name: <a id="com_name">REGIONAL COMMUNITY FORESTRY TRAINING CENTER FOR ASIA AND PACIFIC (RECOFTC) </a>

Example- 2: using line-height: 20px;

例2:使用line-height:20px;

#com_name{
  font-size: 12px;
  position: fixed;
  width: 50%;
  word-break: break-all;
  white-space: normal;
  line-height: 20px; 
}

#com_name{
  font-size: 12px;
  position: fixed;
  width: 50%;
  word-break: break-all;
  white-space: normal;
  line-height: 20px;
}

Company name: <a id="com_name">REGIONAL COMMUNITY FORESTRY TRAINING CENTER FOR ASIA AND PACIFIC (RECOFTC) </a>

#3

Try This...

.class_name {
    word-wrap: break-word;
}

Thank You

#4

Use

#com_name{
  word-break: break-word;
  white-space: normal
}

#5

I too faced this problem.You can use word-wrap,See my following example.

我也遇到了这个问题。您可以使用自动换行,请参阅下面的示例。

#dob{
	font-size: 11px;
	display: inline-block !important;*/
	vertical-align: middle !important;*/
	color: #365899; 
    cursor: pointer;
    word-wrap: break-word;
    width: 158px;
}

<div id="selectDob">
<select label="Day" name="birthdat_day" class="days" id="selectDateOfBirth">
<option value="0" selected="1">Day</option>
</select>
<select label="Month" name="birthday_month" class="months" id="selectDateOfBirth">
<option value="0" selected="1">Month</option>
</select>
<select label="Year" name="birthday_year" class="years" id="selectDateOfBirth">
<option value="0" selected="1">Year</option> 
</select>
<div id="dobContent">
   <a href="#" id="dob"  data-toggle="popover">Why do I need to provide my date of birth?</a>
 </div>
</div>

#6

    <html>
    <head>
    <style>
    /*anchor tag*/
    #com_name{
      font-size: 12px;
      width: 50%;
      white-space: normal
    }

    /*set width for first p tag*/
    .first{
        width:8%;
    }

    /*set width, margin-top and margin-left for second p tag*/
    .second{
        margin-left:8%;
        margin-top:-33px;
        width:32%;
    }
    </style>
    </head>
    <body>
    <p class="first">Company name:</p>
    <p class="second"> <a id="com_name">REGIONAL COMMUNITY FORESTRY TRAINING CENTER FOR ASIA 
AND PACIFIC (RECOFTC)</a></p>
    </body>
    </html>

#1