Question

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

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

和我的CSS：

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

但我的结果是

我想要什么

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

Answer 1

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

示例 - 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>

示例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>

Answer 2

试试这个。

<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>

Answer 3

使用

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

Answer 4

在CSS中设置line-height。

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

Answer 5

我也遇到了这个问题。您可以使用addtodatabase.php，请参阅以下示例。

＆＃13;

word-wrap

＆＃13;

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

＆＃13;

Answer 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>

css如何在长数据时断行

6 个答案: